CODEWITHSUNDEEP
javascriptreactjs
hilarl
hilarl

Reputation: 6880

Switching between className 'active' in reactJS

I am getting the error "TypeError: Cannot read property 'isFollowing' of null" for the following 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 classnames from 'classnames';
import { Button } from 'react-bootstrap';

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

  toggleFollow () {
    this.setState({isFollowing: !this.state.isFollowing});
  }

  render() {

    var user = this.props.user;
    var followClass = this.state.isFollowing? 'active': '';

    return (
      <div className="Cover">
        <div className="Cover-container">
          <div>
            <Avatar 
              username= {user}
              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>

                <div className="Cover-submenu-section connect-menu">
                  <Button className={classnames('follow-btn', {followClass})} href="#" onClick={this.toggleFollow.bind(this)}>Follow</Button>
                  <Button className="connect-btn" href="#" onClick={this.followBtn.bind(this)}>Connect</Button>
                  <Button className="follow-btn" href="#" onClick={this.followBtn.bind(this)}>Follow</Button>
                </div>
              </div>
          </div>
        </div>
      </div>
    );
  }
}

export default Cover;

I could not figure out what I am doing wrong here, I am quite new to reactJS. Any idea anybody? Thanks a lot.

Upvotes: 0

Views: 171

Answers (1)

marizikmund
marizikmund

Reputation: 408

The first thing you need to do is to add the initial value of the isFollowing property. Because you are using ES6 syntax, it's possible to do that in the constructor. Just add this code before toggleFollow() function:

constructor(props) {
  super(props);
  this.state = {
    isFollowing: false
  }
}

The second error (based on the comments at your question) comes from not having the function followBtn() defined. Add this before render() function:

followBtn() {
  alert('followBtn called'); //change it for whatever you want
}

Don't forget that clicking on both buttons (connect, follow) will now lead to the same result, because the same function will be called.

Upvotes: 1

Related Questions