How can I use hooks with the Context API in React?

How can I use hooks with the Context API in React?

You can use the useContext hook to access context values in your functional components. Would you like an example?

Yes, please provide a code example.

Sure! Here's a simple example:

import React, { createContext, useContext, useState } from 'react';

const MyContext = createContext();

const MyProvider = ({ children }) => {
    const [value, setValue] = useState('Hello, World!');
    return <MyContext.Provider value={{ value, setValue }}>{children}</MyContext.Provider>;
};

const MyComponent = () => {
    const { value } = useContext(MyContext);
    return <div>{value}</div>;
};

const App = () => (
    <MyProvider>
        <MyComponent />
    </MyProvider>
);

export default App;

What if I want to update the context value?

You can use the setValue function from the context to update the value. For example:

const MyComponent = () => {
    const { value, setValue } = useContext(MyContext);
    return (
        <div>
            <p>{value}</p>
            <button onClick={() => setValue('New Value')}>Update Value</button>
        </div>
    );
};