Settings states before render - Can't call setState on a component that is not yet mounted

I have the following code: I would like to render out the choice-main-div as many times as the problemcount represents.

class ChoiceTextBubble extends Component{
    constructor(props) {
        super(props);   

        this.state = {
                problemcount:3,
                renderArray:''
            }

        this.renderProblem();               
    }

    onChange(e){
        this.props.updateStoredContent(e);
    }

    renderProblem(){
        var tempArray=[];
        for (var i=0; i<this.state.problemcount;i++){
            tempArray.push(
            <div className="choice-main-div"> 
                <div className="mini-icon"> 
                    <img alt="mini-icon" src={exclam_icon}/>
                </div>
                <div className="choice-div">
                    <form>
                        <input onChange={ e => this.onChange(e)}  autocomplete="off" className ="nice-border normal" type="normal" name="input_problem 01" placeholder={this.props.desc[0]} />
                    </form>
                </div>
            </div>
            )   
            console.log(tempArray);
        }
        this.setState({renderArray: tempArray});
    }

    render() {
        return(
            <div className="textbubble"> 
                <div className="form-section single">
                    <div className="title">
                        <h3>{this.props.title.toUpperCase()}</h3>
                    </div>
                    <div>
                        {this.state.renderArray}
                    </div>
                </div>
            </div>
        )
    }
}
export default ChoiceTextBubble;

However, I get the following warning:

Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to this.state directly or define a state = {}; class property with the desired state in the ChoiceTextBubble component.

I am trying to set the state of the renderArray - prior to rendering.

Answers:

Answer

You don't need to store the data to be rendered in state, you can directly call the function and render the result in render like below

class ChoiceTextBubble extends Component{
    constructor(props) {
        super(props);   

        this.state = {
                problemcount:3,
                renderArray:''
            }

    }

    onChange(e){
        this.props.updateStoredContent(e);
    }

    renderProblem(){
        var tempArray=[];
        for (var i=0; i<this.state.problemcount;i++){
            tempArray.push(
            <div className="choice-main-div"> 
                <div className="mini-icon"> 
                    <img alt="mini-icon" src={exclam_icon}/>
                </div>
                <div className="choice-div">
                    <form>
                        <input onChange={ e => this.onChange(e)}  autocomplete="off" className ="nice-border normal" type="normal" name="input_problem 01" placeholder={this.props.desc[0]} />
                    </form>
                </div>
            </div>
            )   
            console.log(tempArray);
        }
       return tempArray;
    }

    render() {
        return(
            <div className="textbubble"> 
                <div className="form-section single">
                    <div className="title">
                        <h3>{this.props.title.toUpperCase()}</h3>
                    </div>
                    <div>
                        {this.renderProblem()}
                    </div>
                </div>
            </div>
        )
    }
}
export default ChoiceTextBubble;

P.S. You were getting the warning because you were calling the renderProblem function in constructor which calls setState.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.