React: removing / adding classes from a div onClick w/ multiple buttons / classes

Question

Question

I am trying to convert some of my jQuery projects over to use ReactJS. I would like to add/remove individual classes for background color, border, shape, size, etc. I want to be able to use many options (like 20 colors). If I add a background color, I want to remove the current background color without removing the current border, shape, or size classes. Is there a way to do this?

Research

I have read many posts on altering the buttons on hover, on toggling a class on/off, and changing out one class for another, but these have not pointed me in the right direction.

Image

More Details

If I click the bg_blue button, I would like the background to change without loosing the red border. If I click the border_gray button, I would like it to change without loosing the current background color.

Start Code

import React from 'react';
var classNames = require( 'classnames' );

export class Body extends React.Component {

    render() {

        const red = {
            backgroundColor: "red"
        };
        const gray = {
            backgroundColor: "gray"
        };
        const blue = {
            backgroundColor: "blue"
        };
        const border_red = {
            borderWidth: 3,
            borderColor: "red",
            borderStyle: "solid"
        };
        const border_gray = {
            borderWidth: 3,
            borderColor: "gray",
            borderStyle: "solid"
        };
        const border_blue = {
            borderWidth: 3,
            borderColor: "blue",
            borderStyle: "solid"
        };

        return (
            <div className="App-body">
                <div className="start-shape" style= {border_red} ></div>
                <button className="button" onClick="">bg_Red</button>
                <button className="button">bg_Gray</button>
                <button className="button">bg_Blue</button>
                <button className="button">border_Red</button>
                <button className="button">border_Gray</button>
                <button className="button">border_Blue</button>
            </div>
        );
    }
  }

Vivek Doshi · Accepted Answer · 2020-06-15 07:21:18Z

Here you go :

//intial style
  state = {
    borderWidth: 3,
    borderColor: "red",
    borderStyle: "solid"
  };

// then just update/overwrite with new one
setStyle(new_style) {
    this.setState(state => ({ ...state, ...new_style }));
}

// by click and passing the values
onClick={() => this.setStyle(gray)}

Here you check the code by running the code snippet :

class App extends React.Component {
  state = {
    borderWidth: 3,
    borderColor: "red",
    borderStyle: "solid"
  };

  setStyle(new_style) {
    this.setState(state => ({ ...state, ...new_style }));
  }

  render() {
    const red = {
      backgroundColor: "red"
    };
    const gray = {
      backgroundColor: "gray"
    };
    const blue = {
      backgroundColor: "blue"
    };
    const border_red = {
      borderWidth: 3,
      borderColor: "red",
      borderStyle: "solid"
    };
    const border_gray = {
      borderWidth: 3,
      borderColor: "gray",
      borderStyle: "solid"
    };
    const border_blue = {
      borderWidth: 3,
      borderColor: "blue",
      borderStyle: "solid"
    };

    return (
      <div className="App-body">
        <div className="start-shape" style={this.state} />
        <button className="button" onClick={() => this.setStyle(red)}>
          bg_Red
        </button>
        <button className="button" onClick={() => this.setStyle(gray)}>
          bg_Gray
        </button>
        <button className="button" onClick={() => this.setStyle(blue)}>
          bg_Blue
        </button>
        <button className="button" onClick={() => this.setStyle(border_red)}>
          border_Red
        </button>
        <button className="button" onClick={() => this.setStyle(border_gray)}>
          border_Gray
        </button>
        <button className="button" onClick={() => this.setStyle(border_blue)}>
          border_Blue
        </button>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById('react-root'));

.start-shape {
  padding : 50px;
  width: 50px;
}

.button {
  display: inline-block;
  margin: 5px;
}

<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="react-root"></div>

Thank you so much. I've been bashing my head on this for hours. You're the best.

Karun · Accepted Answer · 2020-06-15 07:06:32Z

0

so you need to understand that onClick event should change the state of the component.

to add state add a constructor with initialState to class:

constructor(props){
  super(props);
  this.state = {
    style: {}
  }
}

then you need to add a function which will handle click event which will set the next state:

handleOnClick = (style) => {
    // style = { <css properties>}
    this.setState({style})
}

now that your click handler and state is in place, you just need to call the handler on click event with the next state you want.

<button className="button" onClick={()=>handleOnClick(bg_Red)}>bg_Red</button>

lastly, bind that latest state with the div as:

<div className="start-shape" style={this.state.style} ></div>

answered Jun 15, 2020 at 7:06

Karun

3043 silver badges11 bronze badges

2 Comments

Lewis Lockhart Over a year ago

thank you for the help. I made the changes but get the following compile error: " 'handleOnClick' is not defined" I have the handleOnClick located between the constructor and the render(). Is that right?

Karun Over a year ago

Yes, it should be function of the class

Collectives™ on Stack Overflow

React: removing / adding classes from a div onClick w/ multiple buttons / classes

Question

Research

Image

More Details

Start Code

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Question

Research

Image

More Details

Start Code

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related