Display a form based on the option selection in React - reactjs

Question

I have a form component and i want to show and hide 3 different forms based on the first selection in the option. What's the best way to do this dynamically with state?
class Form extends Component {
state = {
selectedValue: ''
};
render() {
const formStyle = {
display: 'none'
}
return (
<div className={styles.ContactUs}>
<form >
<select>
<option value="" selected="selected"></option>
<option value="form_name1">Form 1</option>
<option value="form_name2">Form 2</option>
<option value="form_name3">Form 3</option>
</select>
</form>
{
this.state.selectedValue === id.value ?
<form name="form_name1" id="form_name1" style={formStyle}>
form 1
</form> : null
}
<form name="form_name2" id="form_name2" style={formStyle} >
form 2
</form>
<form name="form_name3" id="form_name3" style={formStyle} >
form 3
</form>
</div>
);
}
}
export default Form;

Answer 1

you can use nested if else if and state to check what should be displayed. Example code is give below
class App extends Component {
constructor(){
super();
this.state = {
selected:2
}
}
render() {
return (
<div>
{
this.state.selected == 1 ? (
<div> I am form 1 </div>
) : this.state.selected == 2 ? (
<div> I am form 2 </div>
) : this.state.selected == 3 ? (
<div> I am form 3 </div>
) : null
}
</div>
);
}
}
export default App;

Answer 2

Try like this
class Form extends Component {
constructor(){
super();
this.state = {
selectedValue:''
}
this.handleChange = this.handleChange.bind(this);
}
renderSelectedForm(param) {
switch(param) {
case 'form_name1':
return <form name="form_name1" id="form_name1" style={formStyle}>
form 1
</form>;
case 'form_name2':
return <form name="form_name1" id="form_name2" style={formStyle}>
form 2
</form>;
case 'form_name3':
return <form name="form_name1" id="form_name3" style={formStyle}>
form 3
</form>;
default:
return null;
}
}
handleChange(event) { this.setState({selectedValue: event.target.value}); }
render() {
return (
<div>
<div className={styles.ContactUs}>
<form >
<select value={this.state.selectedValue} onChange={this.handleChange}>
<option value="" selected="selected"></option>
<option value="form_name1">Form 1</option>
<option value="form_name2">Form 2</option>
<option value="form_name3">Form 3</option>
</select>
</form>
{this.renderSelectedForm(this.state.selectedValue)}
</div>
);
}