how to add toggle function to change background color of button in react when it clicked?

Question

how to add a toggle function that changes the background color of the button. there is the isHeld method that I tried to connect the button to toggle the background color using styles variable. and every element inside the component has a unique key. here is my code app.js, question.jsx

app.js

 import React from "react"; import "./app.css"; import Question from "./components/question/Question"; import { useState, useEffect } from "react"; import { nanoid } from "nanoid"; const id = nanoid() export default function App() { const [data, setData] = useState([]); function addIds(data) { return data.map((currentTask) => { const id = nanoid(); return { id, ...currentTask, isHeld: false }; }); } function fetchData(endpoint) { fetch(endpoint).then((response) => response.json()).then((data) => { const tasks = addIds(data.results); setData(tasks); }); } useEffect(() => { const endpoint = "https://opentdb.com/api.php?amount=5"; fetchData(endpoint); }, []); function hold(e) { console.log(e.target.dataset.id); } function buildElements(data) { return data.map((quiz) => { const { question, correct_answer, incorrect_answers, isHeld, } = quiz; return ( <Question key={nanoid()} question={question} correct_answer={correct_answer} incorrect_answers={incorrect_answers} hold={hold} isHeld={isHeld} /> ); }); } if (.data;length) return <div />; return (<div className="app"> {buildElements(data)} </div>); }

Question.jsx

 import { nanoid } from "nanoid"; import React from "react"; import "./question.css"; const id = nanoid(); export default function Question(props) { const { hold, question, correct_answer, incorrect_answers, isHeld} = props; const styles = { backgroundColor: isHeld? "#59E391": "black", }; return ( <div className="question"> <h2 className="question-title">{question}</h2> <button key={nanoid()} data-id={nanoid()} className="correct-answer" onClick={hold} style={styles} > {correct_answer} </button> <div className="wrong-answers"> {incorrect_answers.map((ia) => { const id = nanoid(); return ( <button key={id} data-id={id} className="incorrect-answer" onClick={hold} style={styles} > {ia} </button> ); })} </div> </div> ); }

Answer 1

You have to use arrow function in you onClick hold section like below. I think you code work on call hold function on a loop

onClick={()=>hold}

Answer 2

I think something like this can help you.

       <button
        key={nanoid()}
        data-id={nanoid()}
        className="correct-answer"
        onClick={() => setColor((prev) => prev === 'red' ? 'green' : 'red')}
        style={{backgroundColor: color;}}
      >

You could add a state with the color you want and use it wherever you want to the state.

Or you can modify the data at the required index

 function hold(index) {
   const newData = [...data]
   newData[index] = {...data[index], isHeld: false} // Your logic
   setData(newData)
  }