Hide the react components in the form?

Question

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

Answer 1

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)}
                        />}