Please understand I am just learning....
can someone help modify the code so that when the ‘yes’ option is selected, a hidden part of the form is shown to allow additional completion?
I tried to do this using usestate as in hamburger but it didn't work. I have no idea anymore, hence my question....
This is a snippet of a larger form that is all based on usestate
import React, { useState } from 'react';
function S() {
const options = [
{ label: "no", value: "no" },
{ label: "yes", value: "yes" }
]
const [option, setOption] = useState();
const handleOptionChange = (e) => {
setOption(e.target.value);
};
return (
<div className="App">
< div className='container text-center'>
<h3>Creator device</h3>
<form>
<div className="row mb-3">
<label className="col-sm-2 col-form-label" id='finish'>
<h5>other device?</h5>
</label>
<div class="col-sm-10">
<select class="form-select" onChange={handleOptionChange}>
{options.map((option) => (
<option value={option.value}>{option.label}</option>
))}
</select>
</div>
</div>
<div className="row mb-3">
<label className="col-sm-2 col-form-label" id='show'>
<h5> show other device</h5>
</label>
<div class="col-sm-10">
<input type="group" className="form-control" id="inputMB_sn" />
</div>
</div>
</form>
</div>
</div>
);
}
export default S;
You can use conditional rendering inside returned jsx using the ternary operator. Show the field when option variable value is "yes", null otherwise.
import React, { useState } from 'react';
function S() {
const options = [
{ label: "no", value: "no" },
{ label: "yes", value: "yes" },
];
const [option, setOption] = useState();
const handleOptionChange = (e) => {
setOption(e.target.value);
};
return (
<div className="App">
<div className="container text-center">
<h3>Creator device</h3>
<form>
<div className="row mb-3">
<label className="col-sm-2 col-form-label" id="finish">
<h5>other device?</h5>
</label>
<div class="col-sm-10">
<select class="form-select" onChange={handleOptionChange}>
{options.map((option) => (
<option value={option.value}>{option.label}</option>
))}
</select>
</div>
</div>
{option === "yes" ? (
<div className="row mb-3">
<label className="col-sm-2 col-form-label" id="show">
<h5> show other device</h5>
</label>
<div class="col-sm-10">
<input type="group" className="form-control" id="inputMB_sn" />
</div>
</div>
) : null}
</form>
</div>
</div>
);
}