CODEWITHSUNDEEP
javascriptcssreactjs
user12421682
user12421682

Reputation:

Changing button color dinamically with React

I have a simple counter React app and I want the color of the button to become green whenever the counter is a multiple of 5. What is the best way to do so considering best practices?

Here is my code so far:

App.js file:

import React, { useState } from "react";
import Counter from "./Counter";

function App() {
  const [counter, setCounter] = useState(0);

  function increment() {
    setCounter((prevCounter) => prevCounter + 1);
  }

  return <Counter counter={counter} increment={increment} />;
}

export default App;

Counter.js file:

import React from "react";

export default function Counter({ counter, increment }) {
  return (
    <div>
      <button className="counter__counter-button" onClick={increment}>
        {counter}
      </button>
    </div>
  );
}

counter.css file (will add an import for it in the Counter.js file when finished):

.counter__increment-button {
  /* if counter is a multiple of 5 button should be green*/
}

Where should this logic go?

Upvotes: 0

Views: 341

Answers (5)

Abbas Hosseini
Abbas Hosseini

Reputation: 1643

You've asked for best practices so it's the way I suggest:

import React from "react";

export default function Counter({ counter, increment }) {
  const classNames = ['counter__counter-button'];
  if (counter % 5 === 0) classNames.push('counter__counter-button-green');
  return (
    <div>
      <button className={classNames.join(" ")} onClick={increment}>
        {counter}
      </button>
    </div>
  );
}

Upvotes: 1

David Agasiev
David Agasiev

Reputation: 72

You can control the color or any style of your button using the ternary operator. I would suggest you doing it in this way:

import React from "react";

export default function Counter({ counter, increment }) {
  return (
    <div>
        <button
          className="counter__counter-button"
          onClick={increment}
          style={{ color: !(counter % 5) ? 'green' : 'red' }}
        >
          {counter}
        </button>
    </div>
  );
}

Upvotes: 0

samo0ha
samo0ha

Reputation: 3796

update the counter Component like that.

function Counter({ counter, increment }) {
  return (
    <div>
      <button
        className={`counter__counter-button 
        ${counter % 5 === 0 ? "counter__increment-button-green" : ""}`}
        onClick={increment}
      >
        {counter}
      </button>
    </div>
  );
}

counter.css

.counter__increment-button {
  /* if counter is a multiple of 5 button should be green*/
}

.counter__increment-button-green {
  background: rgba(16, 184, 36, 0.7);
}

.counter__increment-button-green:hover {
  background: rgba(16, 184, 36, 1);
}

live working demo

Upvotes: 0

thelonglqd
thelonglqd

Reputation: 1862

export default function Counter({ counter, increment }) {
  return (
    <div>
      <button style={counter % 5 === 0 ? { color: 'green'} : {}} onClick={increment}>
        {counter}
      </button>
    </div>
  );
}

Upvotes: 0

michael
michael

Reputation: 4173

Use the ternary operator to change the style name.

<button className={counter % 5 === 0 ? "counter__counter-button-5" : "counter__counter-button"} onClick={increment}>
  {counter}
</button>

.counter__increment-button-5 {
  /* if counter is a multiple of 5 button should be green*/
  color: green;
}

.counter__increment-button {
  /* if counter isn't a multiple of 5*/
  color: red; /* or something */
}

Upvotes: 0

Related Questions