How do I change the css of classes through react dynamically

Question

My question is regarding changing the CSS of classes through another class. I'm aware that I can only change the CSS if the element we're trying to change is adjacent or a sibling of the selected element.

My goal is to change the background color of the header and tabs class when the Link 'Bloody Mary' is selected but I don't know how to accomplish this. I am using React and the way I thought about it was using states. The default would be white and when the Bloody Mary link is active, it would change the state from white to black. I also plan on changing other styles like the font color but the main idea remains the same, changing the styling dynamically through react.

I have stripped my code to the basics so it looks cleaner. If you can offer some help it would be appreciated.

  class Header extends React.Component {
    render () {
        return(
          <div>
            <div className='header'>         
              <li className='tabs'><NavLink className='style' 
              activeClassName='selected'>Home</NavLink></li>

              <li className='tabs'><NavLink className='style' 
              activeClassName='selected'>Team</NavLink></li>

              <div className='dropdown'>
                <div className='tabs'><NavLink className='style projectstab' 
                activeClassName='selected'>Projects</NavLink></div>
                <div className='dropdown-content'>
                  <a>
                    <p className='dropdown-li'>
                    </p>
                    <NavLink activeClassName='bloodyselected'>
                      Bloody Mary
                    </NavLink>
                  </a>
                </div>
              </div>

              <li className='tabs'><NavLink className='style' 
              activeClassName='selected'>Contact Us</NavLink></li>
            </div>
      )
    }
  }

where's your function to determine which NavLink is selected? you can have a function return an extra class name for the header depending on which navlink is active — Sergio Alen
– Sergio Alen, Commented Oct 24, 2017 at 0:21
I have omitted the "to='/projects/'" that's originally in my code — Louis Choicer
– Louis Choicer, Commented Oct 24, 2017 at 0:23

ichigolas · Accepted Answer · 2017-10-24 00:55:51Z

1

The className and style directives accepts interpolation of a dynamic value. You can use this to achieve what you want.

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = { style: {} };
    this.bloodyMary = this.bloodyMary.bind(this);
  }

  bloodyMary() {
    this.setState({
      style: { backgroundColor: 'red' },
      class: 'someclass'
    });
  }

  render() {
    return <div style={this.state.style} className={this.state.class}>
      <a onClick={this.bloodyMary}>Bloody Mary</a>
    </div>;
  }
}

Take a look at the online demo

edited Oct 24, 2017 at 0:55

answered Oct 24, 2017 at 0:30

ichigolas

7,75532 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Louis Choicer Over a year ago

Bloody mary is not a button but rather a link on the website. That is why there is an "activeclassname" property. I need it so that when the link is not active, the header will change back to white

ichigolas Over a year ago

The concept is the same, you can use onClick on a <a> tag or any other element.

Louis Choicer Over a year ago

Thanks! I understand what you mean now. I put onClick on every other link thats not Bloody Mary which would revert the changes. Just wondering, I'm playing with it right now and when I refresh the page while I'm on the Bloody Mary Page, the color are all set back to default. Would you know how to keep the Bloody Mary state when I refresh the page?

stevenlacerda Over a year ago

You’d have to save the state somewhere. Like in a cookie, local storage, or in the database. If the user is logged in, then saving in the database is probably the right approach. But all depends on your app.

Collectives™ on Stack Overflow

How do I change the css of classes through react dynamically

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related