In the below form component how can we hide the certain input components ?
#1 how can we pass display: none to certain component? #2 tried to set the state and mount but throwing errors while rendering.
const inputStyle = { display:none } and pass the style = {inputStyle} to effect certain components
is there any effective way to condtionally render the below form and hide the different components for different domains?
import React from 'react'
class ClassComponentForm extends React.Component {
state = {}
componentDidMount(){
this.setState(emptyForm)
}
handleChange = (e) => {
this.setState({
[e.target.name]: e.target.value
})
}
render(){
return(
<div id='classComponentForm'>
<h2>
Please Enter Your Information - Class
</h2>
<form id='form'>
<label htmlFor='nameInput'>
Name:
</label>
<input
id='nameInput'
name='name'
type='text'
placeholder='Please type your name'
value={this.state.name}
onChange={(e) => this.handleChange(e)}
/>
<label htmlFor='emailInput'>
Email:
</label>
<input
id='emailInput'
name='email'
type='text'
placeholder='Please type your email'
value={this.state.email}
onChange={(e) => this.handleChange(e)}
/>
<label htmlFor='zipcodeInput'>
Zipcode:
</label>
<input
id='zipcodeInput'
name='zipcode'
type='text'
placeholder='Please type your zipcode'
value={this.state.zipcode}
onChange={(e) => this.handleChange(e)}
/>
<label htmlFor='dateInput'>
Date:
</label>
<input
id='dateInput'
name='date'
type='date'
value={this.state.date}
onChange={(e) => this.handleChange(e)}
/>
</form>
</div>
)
}
}
export default ClassComponentForm
handleChange setup keys inside state object based on input name (because of e.target.name) which you defined in the input element. You already access this value inside the value prop
value={this.state.email}
The same thing can be used to conditionally hide each input. This is an example of how you can hide email input.
{this.state.email && <input
id='emailInput'
name='email'
type='text'
placeholder='Please type your email'
value={this.state.email}
onChange={(e) => this.handleChange(e)}
/>}