I'm trying to display form when a button is clicked. But I want that the form only gets displayed when that specific button is clicked, but the form should be the same for all the buttons. I've thought of doing it setting a state for each button but like this it would be very repetitive I think. Is there an easier algorithm which can accomplish the job?

```
import React, {useState} from 'react'
import DietForm from './dietform.js'

function AddDiet() {

    const [display, setDisplay] = useState(false)
    const [display1, setDisplay1] = useState(false)

    const displayForm = () => {
        if (display === true) {
            setDisplay(false)
        }  else {
            setDisplay(true)
        }
    }

    const displayForm1 = () => {
        if (display1 === true) {
            setDisplay1(false)
        }  else {
            setDisplay1(true)
        }
    }

    return (
        <div>
            <button onClick={displayForm} class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Lunes</button>
            {display ? <DietForm />  : "void 0"}
            <button onClick={displayForm1} class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Martes</button>
            {display1 ?  <DietForm /> : "void 0"}
            <button onClick={displayForm} class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Miercoles</button>
            <button onClick={displayForm} class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Jueves</button>
            <button onClick={displayForm} class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Viernes</button>
            <button onClick={displayForm} class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Sábado</button>
            <button onClick={displayForm} class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Domingo</button>
        </div>
    )
}

export default AddDiet

```