CODEWITHSUNDEEP
javascripthtmlreactjs
ajnabz
ajnabz

Reputation: 308

Changing the colour of specific elements in Reactjs when clicking a button

I want to be able to change the colour of some elements on my webpage to make it more accessible. 

class App extends Component {

  render() {
    return (
      <React.Fragment>
        <div>This is a button</div>
        <button>Click me!</button>
      </React.Fragment>
    );
  }
}

If I had something like this in React, for example, how would I change the background colour of the div to red and the background of the button to blue when clicking the button? I have tried to use ref but I'm not too confident so any help would be appreciated, thank you.

Upvotes: 0

Views: 701

Answers (3)

Bhargav Shah
Bhargav Shah

Reputation: 865

You can conditionally add/remove classes based on a state value.

    function App() {
      const [theme, setTheme] = useState('default');

      handleClick = () => {
        setTheme('red');
      }

      return (
        <React.Fragment>
          <div className={theme === 'red' ? 'red-background': 'default-background'}>This is a button</div>
          <button onClick={handleClick}>Click me!</button>
        </React.Fragment>
      );
   }

And then in your CSS you would have the classes defined

.red-background {
  background: red;
}

.default-background {
  background: white;
}

If you have lots of classes on your component, this is a useful package for conditionally joining class names together. https://github.com/JedWatson/classnames

Upvotes: 1

Kurtis Rogers
Kurtis Rogers

Reputation: 95

Simple explanation:

handleChangeBackground() {
  this.setState({ bgColor: '#000' });
}

<div style={{ backgroundColor: this.state.bgColor }} className="articleParent">

  <div>Article Content Section</div>
  <colorButton handleBackground={this.handleChangeBackground} />

</div>

Inside of colorButton component: 

render() {
  return <Button onClick={this.props.handleBackground}>Change Color</Button>
}

The child is changing the background based on purely on props firing the function.

This might be wrong, I'm between conferences XD If not the case, I hope it helps!

Upvotes: 1

dillon
dillon

Reputation: 69

  class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            divColor: "white",
            buttonColor: "white"
        };
    }



  handleButtonClick = () => {
    this.setState({
        divColor: "red",
        buttonColor: "blue"
    })
  }

  render() {
    return (
      <React.Fragment>
        <div style={{background: this.state.divColor}}>This is a button</div>
        <button 
            style={{background: this.state.buttonColor}}
            onClick={this.handleButtonClick}
        >
            Click me!
        </button>
      </React.Fragment>
    );
  }
}

The new code:

  • adds divColor and buttonColor with an initial value of "white" to the component's state.
  • create a function to change the value of the div and button background.
  • set the background value of the jsx elements to their respective state variable. This way, when those variables update (i.e. when state updates), so will the style.
  • pass in our custom function to the onclick event of the button.

Upvotes: 2

Related Questions