How do i change the color of a button when clicked in react?

user_14060505 0
Viewed 8044

I am new to react and i am trying to use the useState hook to change the color of a button when clicked. Please how do i go about it . Here is the code below

import { Button } from 'bootstrap'
import React, { useState } from 'react'
import "../workout/style.css"

const [buttonColor, setButtonColor] = useState()

function Workout() {

    let buttonColor = document.getElementsByClassName("button")

    return (
        <div>
            <div class="container">
                <button className="button">BODYWEIGHT</button>
                <button className="button">BARBELL</button>
                <button className="button">DUMBELLS</button>
                <button className="button">KETTLEBELLS</button>
                <button className="button">STRETCHES</button>
            </div>
        </div>
    )
}

export default Workout
react-hooks reactjs frontend css javascript
3 Answers

Here are a few examples of two ways to color button backgrounds onClick:

const { useState } = React;

function App() {
  const [btnClass, setBtnClass] = useState(false);
  const [btnColor, setBtnColor] = useState("red");
  return (
    <div className="App">
      <button
        onClick={() => {
          btnClass ? setBtnClass(false) : setBtnClass(true);
        }}
        className={btnClass ? "btnClass clicked" : "btnClass"}
      >
        button
      </button>
      <button
        onClick={() => {
          btnColor === "red" ? setBtnColor("green") : setBtnColor("red");
        }}
        style={{ backgroundColor: btnColor }}
      >
        button
      </button>
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);
.App {
  font-family: sans-serif;
  text-align: center;
}

.btnClass {
  background-color: red;
}

.btnClass.clicked {
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>

https://codesandbox.io/s/focused-cloud-m0qqx?file=/src/styles.css:0-148

user_148499550

The states in react are special variables.

They work like constants so when you assign a value, it wont change at all.

And when you set a new value with the setState function, (the only way to change the value btw) the component rerender.

So, to answer your question... Apply an onClick property to a button.

<div>
    <div class="container">
        <button className="button" onClick={()=> setButtonColor(newColor)} style={{backgroundColor: `${buttonColor}`}}>BODYWEIGHT</button>
        <button className="button">BARBELL</button>
        <button className="button">DUMBELLS</button>
        <button className="button">KETTLEBELLS</button>
        <button className="button">STRETCHES</button>
    </div>
</div>

Bear in mind that buttonColor the waybi used this code, would take values like 'red', 'blue ' ... ect

user_161305070

Please check useEfect or SetState, i recommend UseEfect for this case. go to documentation for more information https://reactjs.org/docs/hooks-state.html

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

remember add bem on your component and load this.

Admin1
Related