111
rated 0 times
[
114]
[
3]
/ answers: 1 / hits: 8150
/ 4 Years ago, tue, february 4, 2020, 12:00:00
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 './components/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 are my codes.
More From » reactjs
