React - toggle in stateless component

Question

I am trying to toggle visiblity of a div in a stateless component like this:

    const playerInfo = (props) => {
      let isPanelOpen = false;
      return (
          <div onClick={() => isPanelOpen = !isPanelOpen }>Toggle</div>
          {isPanelOpen && <div className="info-panel">
            {props.children}
          </div>}
      );
    };

I see that the value of isPanelOpen changes to true, but the panel is not being shown. I assume that is because this is the stateless function that doesn't get called again, so once we return the jsx it will have the value of false, and won't update it later. Is there a way of fixing this, and avoiding of pasing this single variable as props through 4 more parent stateless components?

Answer 1

You can't tell React to re-render the UI by assigning new value directly to the variable (in your case you did isPanelOpen = !isPanelOpen).
The correct method is to use setState.

But you cannot do it in a stateless component, you must do it in a stateful component, so your code should looks like this

import React, {Component} from 'react';
class playerInfo extends Component {
    constructor(props){
        super(props);
        this.state = {
            isPanelOpen: false
        }
    }
    render() {
        return (
            <div onClick={() => this.setState({isPanelOpen: !this.state.isPanelOpen})}>Toggle</div>
            {this.state.isPanelOpen && <div className="info-panel">
              {this.props.children}
          </div>}
        );
    }
}

Explanation

Remember two things:
1) Your UI should only bind to this.state.XXXX (for stateful component) or props.XXX (for stateless component).
2) The only way to update UI is by calling setState() method, no other way will trigger React to re-render the UI.

But... how do I update stateless component since it doesn't have the setState method?

ONE ANSWER:The stateless component should be contained in another stateful component.

Example

Let's say your stateless component is called Kid, and you have another stateful component called Mum.

import React, {Component} from 'react';
class Mum extends Component {
    constructor(props){
        super(props);
        this.state = {
            isHappy: false
        }
    }
    render() {
        return (
           <div>
                <button onClick={() => this.setState({isHappy: true})}>Eat</button>
                <Kid isHappy={this.state.isHappy}/>
           </div>
        );
    }
}

const Kid = (props) => (props.isHappy ? <span>I'm happy</span> : <span>I'm sad</span>);