Learn React Hooks

Can we define conditional Hooks?

What if we wanted to add a checkbox that toggles the use of the first name field?

Let's find out by implementing such a checkbox:

1. First, we add a new Hook in order to store the state of our checkbox:

    const [ enableFirstName, setEnableFirstName ] = useState(false)

2. Then, we define a handler function:

    function handleEnableChange (evt) {        setEnableFirstName(!enableFirstName)    }

3. Next, we render a checkbox:

            <input type="checkbox" value={enableFirstName} onChange={handleEnableChange} />

4. We do not want to show the first name if it is disabled. Edit the following existing line in order to add a check for the enableFirstName variable:

            <h1>My name is: {enableFirstName ? name : ''} {lastName}</h1>

5. Could we ...