"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

Validating a string using regular expressions in JavaScript

Cypress OPENSSL_internal:NO_START_LINE error detected

Navigating to a Different Page in React with a Button and Link

Modify a particular row in a table by referencing its distinct identifier

Include a single element repeatedly on a single webpage

Tips for locating the existence of an Azure File in NodeJS

MaterialUI's Tooltip component is causing warning messages to appear on the client's console

The Node.js application is up and running on the Node server, but unfortunately, no output is

The button's color remains static in Internet Explorer despite attempts to change it using a linear gradient background image

Get rid of the arrow that is displayed when using the `time` input type in HTML5

Customizing pressed row styles and properties within a map iteration in React Native

Is it possible to selectively subscribe to specific parts of a state in Zustand?

Why isn't the background of the container div at the top when using multiple CSS sheets?

Unable to find the designated ./uploads directory while attempting to upload a file in Express JS

guide on creating a simple line highchart using JSON data

Closing the space between navigation bar choices

Guide on implementing gradient animation effects in a React component

Managing jQuery Dependency in Node Package

Dividing an array in PHP using Ajax

Built-in functionality to easily customize gradients within material-ui themes