Hi I’m new with reactJs and I want to show a field after choosing one option of the dropdown list.
Actually I have a dropdown list contain “floor_no” values I want that when I choose “Ground Floor” to hide the field that contain the “stair Length” and when I choose the other options the field of “stair length” displayed.
this is my view code :
<Row>
<Col sm='12' className='mb-1'>
<Label className='form-label' for='name'>
Floor Number <span className='text-danger'>*</span>
</Label>
<select id='floor_no' className='form-control' onChange={(e) => setFloorno(e.target.value)}>
<option value='Ground Floor'> Ground Floor </option>
<option value='Tirst floor'> First Floor </option>
<option value='Second Floor'> Second Floor </option>
<option value='Third Floor'> Third Floor </option>
<option value='Fourth Floor'> Fourth Floor </option>
<option value='Fifth Floor'> Fifth Floor </option>
</select>
<small className='text-danger'>{errorList.floor_no}</small>
<br />
</Col>
</Row>
<Row>
<Col sm='12' className='mb-1'>
<Label className='form-label' for='long_escalier'>
Stair Length <span className='text-danger'>*</span>
</Label>
<input type='text' className="form-control"
onChange={(e) =>
setLongEscalier(e.target.value)
}
placeholder="Stair length" />
<small className='text-danger'>{errorList.long_escalier}</small>
<br/>
</Col>
</Row>
this is how I declared variables:
const [errorList, setError] = useState([]);
const [floor_no, setFloorno] = useState("");
const [long_escalier, setLongEscalier] = useState("");
const [dispo_ascenseur, setAscenseur] = useState("");
thanks in advance