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

CodePudding user response：

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}

CodePudding user response：

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