How to change color button onclick react.js

Question

I work with buttons, and on click i need to change color button.

I have two button: favorite and stats, and onclick i need to change to custom color, for ex favorite is orange, stats blue.

How i can change color onclick?

<div className={classes.fotter_button}>
                    <button>
                      <FontAwesomeIcon
                        icon={faStar}
                        aria-hidden="true"
                      />
                    </button>
                    <button>
                      <FontAwesomeIcon
                        icon={faChartBar}
                        aria-hidden="true"
                      />
                    </button>
                  </div>

Please see stackoverflow.com/help/how-to-ask. You need to be more specific about what you're having trouble with, and you need to show some code related to what you're asking about. — isherwood
– isherwood, Commented May 25, 2021 at 16:04

le123 · Accepted Answer · 2021-05-25 16:13:13Z

2

const [favorite,setFavorite]=useState(false)
const [stats,setStats]=useState(false)

<div className={classes.fotter_button}>
                <button onClick={()=>{setFavorite(true)}} style={{backgroundColor:favorite==true?"orange":""}}>
                  <FontAwesomeIcon
                    icon={faStar}
                    aria-hidden="true"
                  />
                </button>
                <button onClick={()=>{setStats(true)}} style={{backgroundColor:stats==true?"blue":""}}>
                  <FontAwesomeIcon
                    icon={faChartBar}
                    aria-hidden="true"
                  />
                </button>
              </div>

answered May 25, 2021 at 16:13

le123

1808 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Andrew Over a year ago

The same result all butons on the form change colors

le123 Over a year ago

What do you mean? I made a change to each button individually. Did you put in the code that way?

Andrew Over a year ago

Yes i need to change individually each color of button

le123 Over a year ago

so, what the problem? this code change individually each color of button. Explain yourself

Andrew Over a year ago

This code change color all butons which i have on the form

|

Alan · Accepted Answer · 2021-05-25 16:12:18Z

2

One way is to add state variable in your component, and use a function to change the state variable between two values (true, false). Apply the button styling based on the value of the state variable.

const MyToggleButton = () => {
 const [toggle, setToggle] = React.useState(false);
 const toggleButton = () => setToggle(!toggle);
 
 return (
  <>
    <button style={{backgroundColor: toggle ? '#FFF' : '#000'}} onClick={toggleButton}>Click Me</button>
  </>
 );
}

My example is pretty generic; if possible consider using a state variable that more aptly describes your buttons two states.

edited May 25, 2021 at 16:12

answered May 25, 2021 at 16:06

Alan

47k20 gold badges118 silver badges138 bronze badges

2 Comments

Andrew Over a year ago

Onclick all buton which i have in the form change color

Alan Over a year ago

@Andrew You need a state variable per button, or (like my example) create a button component, which you reuse.

Collectives™ on Stack Overflow

How to change color button onclick react.js

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related