Show react component on click

Question

So I'm creating a website for the receptionists at a doctor's office. In order to make a new booking, I have a plus button, and when you click it, I want the makeBooking component to pop up and then there's also a cancel button.

Currently, I am struggling to make the component appear onClick.

This is my code:
This is in the appointments component above return

    //  handleBooking

    const [showResults, setShowResults] = React.useState(false)
    const handleBooking = () => setShowResults(true)

This is in return:

 <button class='addBtn' id="btn"><div className='plus-icon' onClick={handleBooking}><UilPlus/></div></button>

 { showResults ? <MakeBooking /> : null }

And this is my component:

import React from 'react';
import { UilTimes } from '@iconscout/react-unicons';

const MakeBooking = () => {
    return (
        <div>
             <div className='appointments-form'>
                <form id="homeForm">
                <button class='closeBtn' id="btn"><div className='close-icon'><UilTimes/></div></button>
                    <div className='heading'>
                   
                        <h1>Make booking</h1>
                        <h3>Let's get this clients pet booked!</h3>

                    </div>

                    <div className='new-book-container home'>
                        <input list="docList" className='booking-input home' type='text' placeholder='doctor'/>
                        <datalist id="docList">
                            <option value="Sarah"/>
                            <option value="Josh"/>
                            <option value="Daina"/>
                            <option value="Tanielle"/>
                            <option value="Tony"/>
                        </datalist>
                        <input list="clientList" className='booking-input home' type='text' placeholder='client'/>
                        <datalist id="clientList">
                            <option value="Sarah"/>
                            <option value="Josh"/>
                            <option value="Daina"/>
                            <option value="Tanielle"/>
                            <option value="Tony"/>
                        </datalist>
                        <input className='booking-input home' type='date' placeholder='Date'/>
                        <input className='booking-input home' type='time' placeholder='time'/>
                        <input className='booking-input home' type='number' placeholder='room'/>

                        <button className='primary-btn' id='btn'>Book appointment</button>
                    </div>
                  
                </form>
            </div>
        </div>
    );
};

export default MakeBooking;

Answer 1

Try this it will work:

 const [showResults, setShowResults] = React.useState(false)
    const handleBooking = event => {setShowResults(true)};

 { showResults && <MakeBooking /> }