67 lines
1.7 KiB
JavaScript
67 lines
1.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
import Modal from './component/Modal';
|
|
import Select from './component/select';
|
|
import Button from './component/button';
|
|
function Form() {
|
|
const [name, setName] = useState('');
|
|
const [error, setError] = useState('');
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
const [selectedOption, setSelectedOption] = useState('None');
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
if (name.trim() === '') {
|
|
setError('Name is required');
|
|
return;
|
|
}
|
|
if (selectedOption == 'None') {
|
|
setError('Option is required');
|
|
return;
|
|
}
|
|
setError('');
|
|
setIsModalOpen(true);
|
|
};
|
|
|
|
const handleChange = (event) => {
|
|
setSelectedOption(event.target.value);
|
|
};
|
|
|
|
const options = [
|
|
{ value: 'None', label: 'None' },
|
|
{ value: 'cpp', label: 'Cpp' },
|
|
{ value: 'java', label: 'Java' },
|
|
{ value: 'python', label: 'Python' },
|
|
];
|
|
|
|
const handleCloseModal = () => {
|
|
setIsModalOpen(false);
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<form onSubmit={handleSubmit}>
|
|
<div>
|
|
<label htmlFor="name">Name:</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
placeholder='Enter your name'
|
|
value={name}
|
|
onChange={(e) => setName(e.target.value)}
|
|
/>
|
|
<label>Select Course</label>
|
|
<Select options={options} onChange={handleChange} />
|
|
<p>Selected: {selectedOption}</p>
|
|
</div>
|
|
{error && <p>{error}</p>}
|
|
|
|
<Button label="Submit Button" type="submit" />
|
|
</form>
|
|
{isModalOpen && <Modal name={name} selectedOption={selectedOption} onClose={handleCloseModal} />}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
export default Form;
|