I'm new at ReactJs and trying to learn ContextAPI but I'm having this error. I read titles about this situation but I can't reach to solution. Firstly I tried to re-install react as a old version but it didn't changed. I tried to wrap App inside of app.js instead of index.js but I had same result as it happens right now.

App.js

import React, { Component } from 'react'
import './App.css';
import UserFinding from './ponents/UserFinding';

class App extends Component {
render() {
return (
    <div>
        <UserFinding/>
    </div>
      )
  }
}
export default App;

UserFinding.js

import React, { Component } from 'react'
import User from './User.js'
import UserConsumer from '../context.js'

export default class UserFinding extends Component {
render(){
    return(
        <UserConsumer>
            {value=>{
                        const users=value;
                        return(
                            <div>
                                {
                                   users.map(user=>{
                                       return(
                                         <User key={user.id} id={user.id} userName= 
                                         {user.userName} department={user.department}/>
                                       )
                                   }
                                   ) 
                                }
                            </div>
                        )
                     }}
        </UserConsumer>
        ) 
  }
}

User.js

import React, { Component } from 'react'

export default class User extends Component {

state={
    isVisible:true
}
hideShowCard=()=>{
    this.setState({
        isVisible:!this.state.isVisible
    })
}
deleteOnUser=()=>{
    //Dispatch
}
render() {

    return (
            <div>
                <div className="row">
                <div className="col-sm-6">
                    <div className="card">
                        <div className="card-body">
                            <h5 className="card-title">{this.props.userName}<i onClick= 
           {this.deleteOnUser} className="fa fa-trash ml-2"></i></h5>
                            {this.state.isVisible ? <p className="card-text"> 
           {this.props.department}</p>:null}
                            <div onClick={this.hideShowCard} className="btn btn-primary"> 
           {this.state.isVisible ? "Hide" : "Show"}</div>
                        </div>
                    </div>
                </div>
                </div>
            </div>

         )
        }
       }

context.js

import React,{Component} from 'react';
const UserContext=React.createContext();
export class UserProvider extends Component {
 state={
    users:[
      {
        id:1,
        userName:"Ufuk Oral",
        department:"Software Engineering"
      },
      {
        id:2,
        userName:"Emre Çorbacı",
        department:"Data Science"
      }
    ]
   }
 render(){
    return (
        <UserContext.Provider value={this.state}>
            {this.props.children}
        </UserContext.Provider>
    )
 }
}
const UserConsumer=UserContext.Consumer;
export default UserConsumer;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import UserProvider from './context.js';
ReactDOM.render(
<UserProvider><App/></UserProvider>,document.getElementById('root')); 
serviceWorker.unregister();

These is my code.

I'm new at ReactJs and trying to learn ContextAPI but I'm having this error. I read titles about this situation but I can't reach to solution. Firstly I tried to re-install react as a old version but it didn't changed. I tried to wrap App inside of app.js instead of index.js but I had same result as it happens right now.

App.js

import React, { Component } from 'react'
import './App.css';
import UserFinding from './ponents/UserFinding';

class App extends Component {
render() {
return (
    <div>
        <UserFinding/>
    </div>
      )
  }
}
export default App;

UserFinding.js

import React, { Component } from 'react'
import User from './User.js'
import UserConsumer from '../context.js'

export default class UserFinding extends Component {
render(){
    return(
        <UserConsumer>
            {value=>{
                        const users=value;
                        return(
                            <div>
                                {
                                   users.map(user=>{
                                       return(
                                         <User key={user.id} id={user.id} userName= 
                                         {user.userName} department={user.department}/>
                                       )
                                   }
                                   ) 
                                }
                            </div>
                        )
                     }}
        </UserConsumer>
        ) 
  }
}

User.js

import React, { Component } from 'react'

export default class User extends Component {

state={
    isVisible:true
}
hideShowCard=()=>{
    this.setState({
        isVisible:!this.state.isVisible
    })
}
deleteOnUser=()=>{
    //Dispatch
}
render() {

    return (
            <div>
                <div className="row">
                <div className="col-sm-6">
                    <div className="card">
                        <div className="card-body">
                            <h5 className="card-title">{this.props.userName}<i onClick= 
           {this.deleteOnUser} className="fa fa-trash ml-2"></i></h5>
                            {this.state.isVisible ? <p className="card-text"> 
           {this.props.department}</p>:null}
                            <div onClick={this.hideShowCard} className="btn btn-primary"> 
           {this.state.isVisible ? "Hide" : "Show"}</div>
                        </div>
                    </div>
                </div>
                </div>
            </div>

         )
        }
       }

context.js

import React,{Component} from 'react';
const UserContext=React.createContext();
export class UserProvider extends Component {
 state={
    users:[
      {
        id:1,
        userName:"Ufuk Oral",
        department:"Software Engineering"
      },
      {
        id:2,
        userName:"Emre Çorbacı",
        department:"Data Science"
      }
    ]
   }
 render(){
    return (
        <UserContext.Provider value={this.state}>
            {this.props.children}
        </UserContext.Provider>
    )
 }
}
const UserConsumer=UserContext.Consumer;
export default UserConsumer;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import UserProvider from './context.js';
ReactDOM.render(
<UserProvider><App/></UserProvider>,document.getElementById('root')); 
serviceWorker.unregister();

These is my code.

• javascript
• reactjs
• jsx
• react-dom

2 Answers 2

It looks like you are exporting and importing the content in context.js file wrong. Instead of

import UserProvider from './context.js';

try something like this

import {UserProvider} from './context.js';

And how did you try to upgrade the react version? are you using create-react-app? if so you will have to update the react scripts as well. To upgrade to selected version you have to try something like this

npm install --save --save-exact [email protected] [email protected] 

or

yarn add --exact [email protected] [email protected]

I am facing this problem when 'provider' is not added in the context ponent. such that,

<AuthContext value={allContexts}>
        {children}

I solved it, just added '.Provider' such that,`

<AuthContext.Provider value={allContexts}> {children} </AuthContext.Provider>`