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?

Does this answer your question? [React Js conditionally applying class attributes](https://stackoverflow.com/questions/30533171/react-js-conditionally-applying-class-attributes) — Emile Bergeron, Jan 07 '20 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, Jan 07 '20 at 20:00
Maybe even "[How do you use the ? : (conditional) operator in JavaScript?]"(https://stackoverflow.com/q/6259982/1218980) could also help. Start slow, take the time, and good luck! — Emile Bergeron, Jan 07 '20 at 20:16

score 2 · Accepted Answer · answered Jan 07 '20 at 19:47

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 · Answer 2 · 2020-01-07T19:51:10.863

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.

@knaitas Glad I could help. Cheers. – AndrewL64 Jan 07 '20 at 19:56 — AndrewL64, Jan 07 '20 at 19:56

score -1 · Answer 3 · answered Jan 07 '20 at 19:44

-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 07 '20 at 19:44

Logesh P

151
1
12

That's only valid when using CSS modules which is irrelevant to OP's question. – Emile Bergeron Jan 07 '20 at 19:53
Appreciate your help, I was trying this but with no success, another stackoverflower helped me :) – knaitas Jan 07 '20 at 19:54

How to access css class with React?

3 Answers3