React Context error on rendering

Question

I created an app to learn ReactJS. Unfortunately, when I was trying to use context I got 1 error on rendering, but my app compiles well.

This is my code:

import React, {Component} from 'react';

const LoginContext = React.createContext(null);

const user = {
    isLoggedIn: true,
    username: 'test',
};

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoggedIn: false,
            user: user,
        };
    }

    render() {
        return (
            <LoginContext.Provider user={this.state.user}>
                 <Welcome/>
            </LoginContext.Provider>
        );
        }
    }

class Welcome extends Component {
    render() {
        return (
            <div>
                <WelcomeText/>
            </div>
        );
    }
}

class WelcomeText extends Component {
    render() {
        return (
            <LoginContext.Consumer>
                <div>
                    {(user) => (<p>{user.username}</p>)}
                </div>
            </LoginContext.Consumer>
        );
    }
}

export default App;

This is the error: updateContextConsumer http://localhost:3000/static/js/bundle.js:20927:23

  20924 | {
  20925 |   ReactCurrentOwner.current = workInProgress;
  20926 |   ReactDebugCurrentFiber.setCurrentPhase('render');
> 20927 |   newChildren = render(newValue);
        |                 ^  20928 |           ReactDebugCurrentFiber.setCurrentPhase(null);
  20929 | } // React DevTools reads this flag.
  20930 |

Can you help me solve this?

1. In the provider, use value= 2. The consumer must directly wrap the function; the <div> has to go outside (or inside the function): codesandbox.io/s/7m24ry4vqj — user5734311
– user5734311, Commented Jul 18, 2018 at 9:58

Shubham Khatri · Accepted Answer · 2018-07-18 10:17:26Z

4

ContextProvider needs a prop called value and not user

  <LoginContext.Provider value={this.state.user}>
        <Welcome/>
  </LoginContext.Provider>

Also the Context consumer has the children as a function and not the div

class WelcomeText extends Component {
    render() {
        return (
            <LoginContext.Consumer>
                  {(user) => (<div><p>{user.username}</p></div>)}
            </LoginContext.Consumer>
        );
    }
}

answered Jul 18, 2018 at 10:17

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

vitor13almeida Over a year ago

Thanks a lot Shubham Khatri! Changing user to value helped a lot

SeanMC Over a year ago

how do you pass in value, but access user? How are they connected? It wouldn't need to be props.user? Why not

Shubham Khatri Over a year ago

@SeanKPS, the implementation of ContextProvider is such that it takes in a value prop and whatever it receives is then passed on to the ContextConsumer. A random prop won't be treated the same way

SeanMC Over a year ago

so this is const user being accessed from the consumer? It's defined in the provider and addressed by that variable name in the consumer

Simon Park · Accepted Answer · 2019-07-17 17:38:13Z

2

I am currently working on React-16.8.6 and having an interesting bug. I'm not sure if it's the known issue or not but I am having the same error whenever I have a space between two characters '}' and '<' as you can see it line-30.

After (1) removing the space or (2) completely making a new line with , it was resolved.

Even though I love React a lot, it's not perfect and we can make it better together.

answered Jul 17, 2019 at 17:38

Simon Park

913 bronze badges

1 Comment

Paidenwaffle Over a year ago

Wow I can't believe this is an issue but thank you this answer saved me hours of debugging

Collectives™ on Stack Overflow

React Context error on rendering

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related