8

I have this simple code below. When I press the Toggle Button the component Child should hide/show, but it's not.

Do I have to re-render something? I don't want to switch in/out a CSS class, just toggle via a button click

import React, {Component} from 'react';

let active = true

const handleClick = () => {
    active = !active
}

class Parent extends React.Component {
    render() {      
        return (    
            <div>  
                <OtherComponent />

                {active && <Child />}

                <button type="button" onClick={handleClick}>
                    Toggle
                </button>

            </div>            
        )           
    }
}

class Child extends React.Component {
    render() {

        return (    
            <div>          
                I am the child
            </div>            
        )             
    }
}

class OtherComponent extends React.Component {
    render() {       
        return (    
            <div>          
                I am the OtherComponent
            </div>            
        )           
    }
}
1

2 Answers 2

7

You need to get or set it via state:

class Parent extends React.Component {
    constructor(props, context) {
        super(props, context);

        this.state = {
            active: true,
        };

        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState({
            active: !this.state.active
        });
    }

    render() {
        return (
            <div>
                <OtherComponent />

                {this.state.active && <Child />}

                <button type="button" onClick={this.handleClick}>
                    Toggle
                </button>

            </div>
        )
    }
}

Note that with this approach you will re:render the entire parent component (as well as it's children).
Consider using another approach, when you are passing a prop to the child component and it will render itself with content based on this prop (it can render an empty div or something).
There are number of libraries that make this job easy for you, like react-collapse with animations and stuff.

3
  • I get an error "unexpected token" at handleClick = () => {
    – Rory
    May 18, 2017 at 13:28
  • its a typo. i fixed it. notice the change i made on onClick with this.
    – Sagiv b.g
    May 18, 2017 at 13:31
  • Yes, I spotted it just after posting, thanks it's working. And I'll read up on your Note, cheers
    – Rory
    May 18, 2017 at 13:32
2

You should only use state and props to manage your app state.

So instead try:

class Parent extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
        active: true
    };
    this.handleClick = this.handleClick.bind(this);
  }

  const handleClick = () => {
    this.setState({active = !this.state.active});
  }

  render() {      
    return (    
      <div>  
        <OtherComponent />
        {this.state.active && <Child />}
        <button type="button" onClick={handleClick}>
          Toggle
        </button>
      </div>            
    );          
  }
}

Alernatively, you could use forceUpdate() to force a re-render, but this is strongly discouraged:

const handleClick = () => {
  active = !active;
  this.forceUpdate();
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.