how can i change the color of the button when clicked (Only the button that was clicked)-CodePudding

I ma trying to make a Quiz App using React.So, I have been trying to use various methods to make a button change its color when clicked (only the button that was clicked) but when I click it all of them change their color. Any solution for making only the button clicked to change its color? in React.js.

App.js

import Main from './Main'
import Quiz from './Quiz'
import { useState } from 'react'

export default function App() {

    const [switch1, setSwitch1] = useState(false)
    const [color , setColor] = useState(false)

    const qanda = [

        {
            "question": "In web design, what does CSS stand for?",
            "answerOptions" : [ {"answerText" : "Cascading Style Sheet" , "correctAns" : "true" , "id":1 } ,
                                {"answerText" : "Counter Strike: Source" , "correctAns" : "false" , "id":2 } ,
                                {"answerText" : "Corrective Style Sheet" , "correctAns" : "flase" , "id":3 } ,
                                {"answerText" : "Computer Style Sheet" , "correctAns" : "false"  , "id":4 } ]
        },
    
    
        {
            "question": "Under what pseudonym did Stephen King publish five novels between 1977 and 1984?",
            "answerOptions" : [ {"answerText" : "Mark Twain" , "correctAns" : "false" , "id":5} ,
                                {"answerText" : "Richard Bachman" , "correctAns" : "true"  , "id":6} ,
                                {"answerText" : "J. D. Robb" , "correctAns" : "false"  , "id":7} ,
                                {"answerText" : "Lewis Carroll" , "correctAns" : "false"  , "id":8} ]
        },
    
        {
            "question": "Which modern day country is the region that was known as Phrygia in ancient times?",
            "answerOptions" : [ {"answerText" : "Greece" , "correctAns" : "false"  , "id":9} ,
                                {"answerText" : "Syria" , "correctAns" : "false"  , "id":10} ,
                                {"answerText" : "Egypt" , "correctAns" : "false" , "id":11 } ,
                                {"answerText" : "Turkey" , "correctAns" : "true"  , "id":12} ]
        },
    
    
        
    ]

    const quizQ = qanda.map(ques => <Quiz question={ques.question} answer1={ques.answerOptions[0].answerText}  answer2={ques.answerOptions[1].answerText}  
        answer3={ques.answerOptions[2].answerText}  answer4={ques.answerOptions[3].answerText} click={switchColor} clicked={color}  />)

   
    // function getId() {
    //     for(const i = 0 ; i > 3 ; i  ) {
    //         const qId = qanda.map(ques => ques.answerOptions[i].id)
    //     }
    // }
 
   

 
    function switchIt() {

        setSwitch1(prevValue => !prevValue)
    }

    function switchColor() {

        setColor(prevValue => !prevValue)
        
        
    }


    return (
        <div className="body">

            

            {switch1 ? quizQ  : <Main onclick={switchIt}/> }



        </div>
    )

}

Quiz.js

import blob1 from './blob1.png'
import blob2 from './blob2.png'


export default function Quiz(props) {

    const style = {
        backgroundColor: props.clicked && '#D6DBF5',
        border: props.clicked && '#293264'
    }



    return (
        <div className='quiz-body'>
            <img src={blob1} className="blob1"/>
            <img src={blob2} className="blob2"/>

            <h2 className='h2-quiz'>{props.question}</h2>

            <button className='btn-ans' onClick={props.click}  style={style}>{props.answer1}</button>
            <button className='btn-ans' onClick={props.click}  style={style}>{props.answer2}</button>
            <button className='btn-ans' onClick={props.click}  style={style}>{props.answer3}</button>
            <button className='btn-ans' onClick={props.click}  style={style}>{props.answer4}</button>
            <br/>
            <br/>
            <hr/>


            
        </div>
    )

}

Main.js

import blob1 from './blob1.png'
import blob2 from './blob2.png'


export default function Main(props) {
 
    


    return (
        <main>

            <img src={blob1} className="blob1"/>
            <h1 className='main-h1'>Quizzical</h1>
            <p className='main-description'>Welcome, to the Quizzical Quiz game.</p>
            <button className='main-button' onClick={props.onclick} >Start Quiz</button>
            <img src={blob2} className="blob2"/>

        </main>
    )

}

index.css



body {
    margin: 0%;
    padding: 0%;
    background-color: #F5F7FB;  
    font-family: 'karla' , sans-serif ;
}

/* Home Page Part */

main {
 text-align: center;
 margin-top: 40vh;
    
}

.main-h1 {
  margin: 0;
  font-size: 100px;
  
}

.main-description {
    font-size: 40px;
    margin-top: auto;
    margin-bottom: 50px;
}

.main-button {
    font-size: 30px;
    padding: 5px;
    background: #4D5B9E;
    border-radius: 15px;
    width: 150px;
    border: none;
    color: #F5F7FB;
    font-family: 'karla' , sans-serif ;
    cursor: pointer;
}

.blob1 {
    position: absolute;
    top:0;
    right: 0;
}

.blob2 {
    position: absolute;
    bottom:0;
    left: 0;
}


/* Quiz Part */

.quiz-body {
   /* background-color: #4D5B9E;  */
   width: 65%;
   text-align: left;
   margin: auto;
}

.h2-quiz {
    font-size:25px;
    font-weight:800;
}

.btn-ans {
    font-size: 15px;
    border: solid 1px black;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    font-family: 'karla';
    font-weight: 600;
    margin: 10px;
    background-color:#F5F7FB ;
    border-radius: 10px ;


}

I am sorry if I have done the techniques wrong this is my first project after learning React

CodePudding user response：

You can try to use state to store the color. Maybe this would give you the idea how to solve the problem :

class Test extends React.Component {
constructor(){
    super();

    this.state = {
       black: true
    }
}

changeColor(){
   this.setState({black: !this.state.black})
}

render(){
    let btn_class = this.state.black ? "blackButton" : "whiteButton";

    return (
         <button className={btn_class} onClick=. 
 {this.changeColor.bind(this)}>
              Button
         </button>
    )
 }
}

React.render(<Test />, document.getElementById('container'));

ej:https://jsfiddle.net/tkkqx2y2/

thnks to @user3350597 for response

CodePudding user response：

import React, { useState } from "react";
import "./App.css";
const App = () => {
  const [style, setStyle] = useState(true);

  const changeStyle = () => {
    setStyle(!style);
  };
  return (
      <div className={style ? "cont" : "cont2"}>
        <button className="button" onClick={changeStyle}>
          Click me!
        </button>
      </div>
  );
};
export default App;

.cont {
  width: 250px;
  height: 250px;
  margin-top: 50px;
  margin-left: 150px;
  background-color: violet;
}
.cont2 {
  width: 250px;
  height: 250px;
  margin-top: 50px;
  margin-left: 150px;
  background-color: yellow;
}