"Is there a way to modify the color of the button once it's been clicked, but only for the specific button that was

Question

"Is there a way to modify the color of the button once it's been clicked, but only for the specific button that was

Looking to create a Quiz App using React and facing an issue where all buttons change color when clicked, instead of just the one that was clicked. Any solutions on how to make only the clicked button 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 switchIt() {
        setSwitch1(prevValue => !prevValue)
    }

    function switchColor() {
        setColor(prevValue => !prevValue)        
    }


    return (
        <div className="body">
            {switch1 ? quizQ  : <Main onclick={switchIt}/> }
        </div>
    )
}

...

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

javascript html css reactjs

Answer 1

Answer №1

If you're looking to manage color using state, one approach could be storing the color in a React component's state. Here's an example that might help you with the issue:

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

    this.state = {
       black: true
    }
}

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

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

    return (
         <button className={buttonClass} onClick=. 
 {this.changeColor.bind(this)}>
              Change Color
         </button>
    )
 }
}

React.render(<ColorButton />, document.getElementById('color-container'));

You can check out the live example here: https://jsfiddle.net/tkkqx2y2/

Big thanks to @user3350597 for sharing their insights!

Answer 2

If you're looking to manage color using state, one approach could be storing the color in a React component's state. Here's an example that might help you with the issue:

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

    this.state = {
       black: true
    }
}

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

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

    return (
         <button className={buttonClass} onClick=. 
 {this.changeColor.bind(this)}>
              Change Color
         </button>
    )
 }
}

React.render(<ColorButton />, document.getElementById('color-container'));

You can check out the live example here: https://jsfiddle.net/tkkqx2y2/

Big thanks to @user3350597 for sharing their insights!

Answer 3

Answer №2

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

Answer 4

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

Answer 5

Answer №3

One possible approach is:

import "./styles.css";
import "./App.css";
import { useState } from "react";

export default function App() {
  const [active, setActive] = useState(null);
  const handler = (i) => {
    setActive(i);
  };

  const btns = [
    { id: 0, title: "First Button" },
    { id: 1, title: "Second Button" },
    { id: 2, title: "Third Button" }
  ];

  return (
    <div className="App">
      {btns.map((btn, i) => (
        <button
          key={i}
          className={i === active ? "active-btn" : "inactive-btn"}
          onClick={() => handler(i)}
        >
          {btn.title}
        </button>
      ))}
    </div>
  );
}

.inactive-btn {
  border: none;
  padding: 8px;
  border-radius: 12px;
  color: white;
  background: grey;
}
.active-btn {
  color: white;
  border: none;
  padding: 8px;
  border-radius: 12px;
  background: black;
}

Answer 6

One possible approach is:

import "./styles.css";
import "./App.css";
import { useState } from "react";

export default function App() {
  const [active, setActive] = useState(null);
  const handler = (i) => {
    setActive(i);
  };

  const btns = [
    { id: 0, title: "First Button" },
    { id: 1, title: "Second Button" },
    { id: 2, title: "Third Button" }
  ];

  return (
    <div className="App">
      {btns.map((btn, i) => (
        <button
          key={i}
          className={i === active ? "active-btn" : "inactive-btn"}
          onClick={() => handler(i)}
        >
          {btn.title}
        </button>
      ))}
    </div>
  );
}

.inactive-btn {
  border: none;
  padding: 8px;
  border-radius: 12px;
  color: white;
  background: grey;
}
.active-btn {
  color: white;
  border: none;
  padding: 8px;
  border-radius: 12px;
  background: black;
}

"Is there a way to modify the color of the button once it's been clicked, but only for the specific button that was

Answer №1

Answer №2

Answer №3

Similar questions

Creating a dynamic image carousel using jQuery

Accessing the web3 attribute from the React-Web3 provider to enhance functionality

Imagine a scenario where your json_encode function returns API data that is already in JSON format. What would

"What is the best way to connect a md-input to the value of a md-slider

Resolving the ReferenceError in Next.js: How to Handle the localStorage is not defined Issue

Program that duplicates text to clipboard upon clicking on the text

Keep moving forward in Sailsjs even after sending back a response with res.json();

Enabling communication between my React frontend and Express server

Determining the duration since generating a unique objectid in mongodb

Creating a Higher Order Component (HOC) with a secure route: A step-by

Retrieve custom content from a database using Laravel and Ajax when clicking on a navigation bar

Tips for creating asynchronous Redux actions in a genuine application

Tips for extracting information from a Javascript Prompt Box and transferring it to a PHP variable for storage in an SQL database

What is the best way to simulate a library in jest?

Center the p tag vertically

The ng-switch functionality does not seem to be functioning properly, even when the is

Determining the height of the tab bar across devices using React-Navigation

Add the following code snippet below every second set of two paragraphs that are enclosed within h

The Material-ui toolbar is displaying unexpected results and not showing the desired output

Unable to display menu content text using jQuery