How to setState inside render?

Question

First I try to check if the user's id is matching with the one from DB. If so then set a new state for hasApplied and toggle but I receive the following waring Cannot update during an existing state transition (such as within 'render' or another component)...

I've tried even to call a function thats outside render and is saying the same thing. But if I call that function outside render by onPress={} method from a button component then everything is fine. But in this case I need to check this first when the user access the page and if hasApplied return false then use the button

render() {
        let { hasApplied } = this.state;
        let { toggle } = this.state;
        let matchUserId = [];
        const textValue = toggle ? 'APPLIED' : 'APPLY NOW';
        const buttonBg = toggle ? '#848d95' : '#34ed1c';
        const buttonState = toggle ? 'false' : 'true';
        const { navigation } = this.props;
        const { goBack } = this.props.navigation;
        const { jobBusiness, locationBusiness } = this.props.navigation.state.params;
        let { user, location, job, data, business } = this.props.navigation.state.params;

        // Check the available applied ids and concatenate objects in Array
        // Check if user_id match any of appliedUserId 
        if (!hasApplied) {
            job.applied.map(o => {
                matchUserId.push(o.user_id);
            });
            const resultUserId = [].concat.apply([], matchUserId);
            hasApplied = resultUserId.includes(this.props.user_id)
            // this.onButtonPress()
            this.setState({hasApplied: true, toggle: true})
        }

Can anyone have a solution for this?

thanks

Possible duplicate of [ReactJS: Warning: setState(...): Cannot update during an existing state transition](https://stackoverflow.com/questions/37387351/reactjs-warning-setstate-cannot-update-during-an-existing-state-transiti) — Andrea Carraro, Jun 20 '18 at 18:49
There's no reason you can't have that code in another Component method. React has blocked setState from being called from the render method because of the good possibility of infinite loops. See this question: https://stackoverflow.com/questions/48226268/calling-setstate-in-react-from-render-method — SameOldNick, Jun 20 '18 at 18:49

score 2 · Answer 1 · answered Jun 20 '18 at 18:48

With React you shouldn't, nor do you need to, setState within render().

I would suggest placing your state check within componentDidMount(). What this does is guarantee execution of any code within the componentDidMount() function as the component is rendered, allowing you to perform checks, setters, etc.

Essentially, do this:

componentDidMount() {
    // check if the user ID matches what's in the database
    // if the above is true, setState as needed
}

As a note, you can use ternary expressions to display or not display content within a React render. Let me show an example:

    { (this.state.whateverStateYouWantToCheck)
      ? <div className="class-of-your-choice">Content you wish to display.</div>
      : null }

In the above, if this.state.whateverStateYouWantToCheck is true, the code after the '?' will be rendered. If false, nothing will be rendered (the null).

One final thing, since I don't know what your component/container structure is in this case, I'm uncertain if the userID you're referencing is stored within this component or a parent container. If it's available within the state of the parent container, you'll definitely want to pass it down as a prop. If you have any questions about implementing this, let me know!

Using the methods I've described, you can make a great solution here.

How to setState inside render?

1 Answers1