Uncaught TypeError: Unable to read setState property from null

Question

I am new to using reaction and have run into a problem:

Uncaught TypeError: Unable to read setState property from null.

Basically, what I'm trying to do is a user can click on three different headers, and when clicked, he will display a specific template for that heading. This is the code I'm currently using that gave me this error:

class Selection extends React.Component {

constructor(props) {
    super(props);
    this.state = {selections: [], donateActive: true, fundraiseActive: false, speakActive: false };
}

componentDidMount() {
    this.setState({
        selections: selectionData.selections
    })
}

componentWillUnMount(){
    console.log("unmounted!"); 
}

donateOnClick() {
    this.setState({ donateActive: true, fundraiseActive: false, speakActive: false});
}

fundraiseOnClick() {
    this.setState({ fundraiseActive: true, donateActive: false, speakActive: false});
}

speakOnClick() {
    this.setState({ speakActive: true, fundraiseActive: false, donateActive: false});
}

donateTemplate() {
    return (
        <div>
            <h1>donate template</h1>
        </div>
    )
}   

fundraiseTemplate() {
    return (
        <div>
            <h1>fundraise template</h1>
        </div>
    )

}

speakTemplate() {
    return (
        <div>
            <h1>speak template</h1>
        </div>
    )
}

render() {
    return(
        <div>
            <div className="col-sm-6 col-sm-push-6 right">
                <div className="right-content-container">
                    <div className="selections">
                        <h3>You can</h3>
                        <h1 onClick={this.donateOnClick} className="selection active" id="selection-donate">donate</h1>
                        <h1 onClick={this.fundraiseOnClick} className="selection" id="selection-fundraise">fundraise</h1>
                        <h1 onClick={this.speakOnClick} className="selection" id="selection-speak">speak up</h1>
                        <hr></hr>
                    </div>
                    <div>
                        {
                            if (this.state.donateActive) {
                                this.donateTemplate()
                            }
                            if (this.state.fundraiseActive) {
                                this.fundraiseTemplate()
                            }
                            if (this.state.speakActive) {
                                this.speakTemplate()
                            }
                        }
                    </div>
                </div>
            </div>
            <div className="col-sm-6 col-sm-pull-6 left">
                <div className="left-content-container">
                    <img className="img-responsive hidden-xs" src="./images/selections/.jpg" alt=""/>
                    <img className="img-responsive hidden-sm hidden-md hidden-lg" src="./images/selections/.jpg" alt=""/>
                </div>
            </div>
        </div>
    );
}


}

Also, I'm not sure if I can use expressions IFinside return(), as I do now inside the method render(), is there a better way to do this?

Any help would be greatly appreciated.

Answer 1

this. React React this, . , , this

constructor(props) {
  super(props);
  this.donateOnClick = this.donateOnClick.bind(this);
  // other function bindings
}

if, if {}, . JSX, , javascript, javascript .

UPDATE: , if , :

<div>
    { this.state.donateActive ? this.donateTemplate() : null }
    { this.state.fundraiseActive ? this.fundraiserTemplate() : null }
    { this.state.speakactive ? this.speakTemplate() : null }
</div>

if. : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

, . , , .

Answer 2

, :

donateOnClick = () => {
    this.setState({ donateActive: true, fundraiseActive: false, speakActive: false});
}

fundraiseOnClick = () => {
    this.setState({ fundraiseActive: true, donateActive: false, speakActive: false});
}

speakOnClick = () => {
    this.setState({ speakActive: true, fundraiseActive: false, donateActive: false});
}