How to access css class with React?

Question

I'm trying to access CSS class with react.

Here is my CSS file:

    body {
  overflow-x: hidden;
}

#sidebar-wrapper {
  min-height: 100vh;
  margin-left: -15rem;
  -webkit-transition: margin .25s ease-out;
  -moz-transition: margin .25s ease-out;
  -o-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
}

#sidebar-wrapper .sidebar-heading {
  padding: 0.875rem 1.25rem;
  font-size: 1.2rem;
}

#sidebar-wrapper .list-group {
  width: 15rem;
}

#page-content-wrapper {
  min-width: 100vw;
}

#wrapper.toggled #sidebar-wrapper {
  margin-left: 0;
}

@media (min-width: 768px) {
  #sidebar-wrapper {
    margin-left: 0;
  }

  #page-content-wrapper {
    min-width: 0;
    width: 100%;
  }

  #wrapper.toggled #sidebar-wrapper {
    margin-left: -15rem;
  }
}

in jQuery it is this:

 $("#menu-toggle").click(function(e) {
  e.preventDefault();
  $("#wrapper").toggleClass("toggled");
});

I found in React people do like this:

    import React from 'react';
import './sidebar.component.css';

class SidebarWrapper extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        toggled: true,
        bgColor: 'black'
      };

      this.toggleMenu = this.toggleMenu.bind(this);
    }

    toggleMenu= (e) => {
        this.setState({toggled: !this.state.toggled})
        this.setState({bgColor: 'red'})
        console.log(this.state.toggled)
        console.log(this.state.bgColor)
    }

    render() {
      let buttonClass = (this.state.toggled) ? 'true' : 'false';
      return (
        <div className={buttonClass}>

           <button id="menu-toggle" style={{backgroundColor:  this.state.bgColor  }} onClick={this.toggleMenu}>Toggle Menu</button>
        </div>
      );
    }
  };

  export default SidebarWrapper;

But nothing happens except for the color change. I'm thinking that the wrapper.toggle css class needs to be accessed somehow via react, but how?

I cannot do this.state {wrapper.toggle = true}

Is there something I am doing wrong?

Hi, <div class="d-flex" id="wrapper"> it's a sidebar which I want to collapse on button click — knaitas
– knaitas, Commented Jan 7, 2020 at 19:39
Does this answer your question? React Js conditionally applying class attributes — Emile Bergeron
– Emile Bergeron, Commented Jan 7, 2020 at 19:51
I'm not quite sure, this looks like a more complex problem to me. Thing is I'm a beginner and this thread helped me grasp some important concepts and I probably couldn't solve the error with the one you provided. Thanks though! — knaitas
– knaitas, Commented Jan 7, 2020 at 20:00
Maybe even "[How do you use the ? : (conditional) operator in JavaScript?]"(stackoverflow.com/q/6259982/1218980) could also help. Start slow, take the time, and good luck! — Emile Bergeron
– Emile Bergeron, Commented Jan 7, 2020 at 20:16

mikelowe · Accepted Answer · 2020-01-07 19:47:36Z

The line:

let buttonClass = (this.state.toggled) ? 'true' : 'false';

will either evaluate buttonClass to the string values of either 'true' or 'false'.

Using <div className={buttonClass}> will apply a class equal to the value of buttonClass, so the example you've provided will set the class of the div to one of those same 'true' or 'false' string values.

Additionally the css you've applied specifies a #wrapper.toggled selector which requires you to use the wrapper id on your div if you want to css rule to apply.

so change your render function to:

render() {
      let buttonClass = (this.state.toggled) ? 'toggled' : '';
      return (
        <div id="wrapper" className={buttonClass}>

           <button id="menu-toggle" style={{backgroundColor:  this.state.bgColor  }} onClick={this.toggleMenu}>Toggle Menu</button>
        </div>
      );
    }

AndrewL64 · Accepted Answer · 2020-01-07 19:51:10Z

1

In your buttonClass ternary operation, you are currently assigning the strings "true" or "false" to your div element's classlist based on your this.state.toggled boolean value.

Change this line:

let buttonClass = (this.state.toggled) ? 'true' : 'false';

To this:

let buttonClass = (this.state.toggled) ? 'toggled' : ''; // add "toggled" to your div classlist if "this.state.toggled" is true

Also, either remove the wrapper id from your div and use .wrapper { styles } in your css or add the id to your div beforehand when you render the div so that #wrapper.toggled { styles } in your css is targetting the element correctly.

edited Jan 7, 2020 at 19:51

answered Jan 7, 2020 at 19:40

AndrewL64

16.4k8 gold badges51 silver badges87 bronze badges

1 Comment

AndrewL64 Over a year ago

@knaitas Glad I could help. Cheers.

Logesh P · Accepted Answer · 2020-01-07 19:44:30Z

-1

I think your have to remove # in your css replace it with .

And then import css import styles from ''yourfilename"

And then call that class name

Example

<h1 className ={styles.yourclassname}> xyz </>

answered Jan 7, 2020 at 19:44

Logesh P

2274 silver badges18 bronze badges

2 Comments

Emile Bergeron Over a year ago

That's only valid when using CSS modules which is irrelevant to OP's question.

knaitas Over a year ago

Appreciate your help, I was trying this but with no success, another stackoverflower helped me :)

Collectives™ on Stack Overflow

How to access css class with React?

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related