I am attempting to use hooks to manage the state of Context.Provider

Question

I tried to wrap a data shared component with using hooks and context in react.

I did try to use useState into a stateless component of Provider that I created. But the thing is because this Provider is stateless, data cannot be shared within two different Provider components I define in DOM. So I plan to change Provider to a class component and use hooks outside of it.

And this is the part of the code I wrote but the problem is I get nothing displayed in the browser and I don't know why. I am not sure where my usage is wrong.

function createCTX(defaultProps) {
  const CTX = React.createContext(defaultProps);

  const HookComponent = Component => {
    const testComponent = () => {
      const [newProps, setData] = useState(defaultProps);
      return <Component newProps={newProps} setData={setData} />;
    };
    return testComponent;
  };

  class Provider extend React.Component {
    constructor(props) {
      super(props);
      const {
        newProps,
        setData
      } = props;
      this.state = {
        Props: newProps,
        setData
      }
    }
    render() {
      return <CTX.Provider value={this.state}>{this.props.children} 
      </CTX.Provider>;
    }
  }

  class Consumer extends React.Component {
    render() {
      return (
        ...
      );
    }
  }

  const ProviderComponent = HookComponent(Provider);

  return { ProviderComponent, Consumer };
}

There is no error message. And even I just change to without using the values of useState, I still get nothing displayed. Does that mean Context.Provider cannot be used in this way?

Answer 1

You can extract the useState outside the Provider and then use the useState in the parent of the Context Provider.

Also you should use the useContext hook instead of the Consumer.

Something like this:

...
const Context = React.createContext()
...
const App = () => {
  const [state, setState] = useState("Some Text")

  const changeText = () => {
    setState("Some Other Text")
  }
...

  <h1> Basic Hook useContext</h1>
     <Context.Provider value={{changeTextProp: changeText,
                               stateProp: state
                                 }} >
        <TestHookContext />
     </Context.Provider>
)}

then the child component

import React, { useContext } from 'react';

import Context from '../store/context';

const TestHookContext = () => {
  const context = useContext(Context)

  return (
    <div>
    <button onClick={context.changeTextProp}>
        Change Text
    </button>
      <p>{context.stateProp}</p>
    </div>
  )
}


export default TestHookContext;

SO the main thing is not to use state inside the provider but use state from a parent then pass it in to the provider. Also make sure to wrap the child components with the provider as well.