CODEWITHSUNDEEP
javascriptcssreactjs
knaitas
knaitas

Reputation: 51

How to access css class with React?

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?

Upvotes: 0

Views: 6081

Answers (3)

AndrewL64
AndrewL64

Reputation: 16311

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.

Upvotes: 1

mikelowe
mikelowe

Reputation: 116

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>
      );
    }

Upvotes: 2

Logesh P
Logesh P

Reputation: 227

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 </>

Upvotes: -1

Related Questions