For long time I struggled to manage state with React, but with the release of React Hooks it became so much easier.
If you are looking for something to grasp the idea and apply it in short time keep on reading.
Here is a complete example if you would like to check directly
Setting up context and context provider
To work with context you first setup context by using createContext()
then you pass props to the provider and use props.chidren
to pass components inside it.
Here is an example
import React from "react";
export const UsersContext = React.createContext();
export const UsersProvider = props => {
const getUsers = async () => {
return await fetch("https://jsonplaceholder.typicode.com/users")
.then(res => res.json())
.then(result => result)
.catch(error => console.log("error happened", error));
};
return (
<UsersContext.Provider value={{ getUsers }}>
{props.children}
</UsersContext.Provider>
);
};
Wrapping components inside context
To pass value of context you need to wrap your component inside your context provider, after that you will have access to state in your context from your context. Remember that we passed props.children
inside our context provider.
Here is an example of how this looks like
import React from "react";
import "./styles.css";
import Users from "./Users";
import { UsersProvider } from "../src/Context/UsersContext";
export default function App() {
return (
<UsersProvider>
<div className="App">
<h1>Hello Hoooooks</h1>
<Users />
</div>
</UsersProvider>
);
}
Using context and state inside our function
Now after you created context, and you wrapped your component inside provider, it is time to consume it.
To do this you need useEffect
,useContext
and useState
.
useContext
will pass value and functions to your component so you can have direct access to it.
useEffect
will invoke your getUsers
function to change local state users
useState
is the new way to use state inside a functional component.
Here is the complete example
import React from "react";
import { UsersContext } from "./Context/UsersContext";
const Users = () => {
const [users, setUsers] = React.useState([]);
const { getUsers } = React.useContext(UsersContext);
React.useEffect(() => {
getUsers().then(result => {
setUsers(result);
});
}, []);
return (
<div>
{users.map(user => (
<div key={user.id}>{user.name}</div>
))}
</div>
);
};
export default Users;
This is a summary of what you have done to use context
- You created a file and called it
UsersContext
to return an API call to get users from JSONPlaceholder - You used
createContext()
to create context, then You created context provider and passed value object inside with our functions. - In
App.js
you passed provider to access context state and functions. - In
Users.js
you called context withuseContext
hook and passed users inside your component.
Top comments (1)
Well good work 👏👏👏