toggle classes in ReactJS

Question

I am trying to toggle the className to 'active' on clicking the 'Follow' button. I have tried following the tutorials and guides on the react website and other references but had no luck. Below is my code:

import React from 'react';
import styles from './Cover.css';
import withStyles from '../../decorators/withStyles';
import Link from '../../utils/Link';
import Avatar from './Avatar';

import { Button } from 'react-bootstrap';

@withStyles(styles)
class Cover extends React.Component {


  render() {
    return (
      <div className="Cover">
        <div className="Cover-container">
          <div>
            <Avatar 
              username="hilarl" 
              profession="Web Developer" 
              location="New York, New York"
              status="I am here to protect my business, a bunch of kids are out to ruin me" />
              <div className="Cover-submenu-container">
                <div className="Cover-submenu-section">
                  .
                </div>
                <div className="Cover-submenu-section links">
                  <a href="#" className="Cover-submenu-link">
                    <i className="fa fa-twitter"></i>
                  </a>
                  <a href="#" className="Cover-submenu-link">
                    <i className="fa fa-facebook"></i>
                  </a>
                </div>

                // follow button

                <div className="Cover-submenu-section connect-menu">
                  <Button className="follow-btn" href="#">Follow</Button>
                </div>
              </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Cover;

Would be great if somebody could helpout with this. Thanks

render () { let followClass = this.state.isFollowing? 'active':''; — Andreas Møller
– Andreas Møller, Commented Aug 26, 2015 at 10:48
Like Andreas Möller said make it dependent of the state or the props, — Max Bumaye
– Max Bumaye, Commented Aug 26, 2015 at 10:53

Andreas Møller · Accepted Answer · 2015-08-26 10:53:02Z

2

you render the Button with the active class.

render () {
  let isFollowing = this.state.isFollowing
  ...
      <Button className={`follow-btn ${isFollowing? ' active':''}`} ...

all you need to do now is to update isFollowing on button click.

answered Aug 26, 2015 at 10:53

Andreas Møller

8495 silver badges9 bronze badges

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

7 Comments

Max Bumaye Over a year ago

probably the right approach so +1. But I personally like to handle these cases with inline styles. You wouldnt need this chaining up string crap.

Max Bumaye Over a year ago

like this: <Button className="follow-btn" style={isFollowing?style.active:{}} />

Andreas Møller Over a year ago

Either do all you styling inline or all in stylesheets mixing causes problems

Andreas Møller Over a year ago

you need an initial state: try this: gist.github.com/cullophid/81386f009388b0aa160b

Andreas Møller Over a year ago

I would recommend creating a FollowButton component, to better modularize your code

|

Collectives™ on Stack Overflow

toggle classes in ReactJS

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related