React: Class Based Context API to Hook Based context API

Question

I am really new in Hooks and during learning faces many difficulties to switch from the old style.

My old code looks like:

context.js

import React from "react";

const SomeContext = React.createContext(null);

export const withContext = (Component) => (props) => (
  <SomeContext.Consumer>
    {(server) => <Component {...props} server={server} />}
  </SomeContext.Consumer>
);

export default SomeContext;

main index.js

<SomeContext.Provider value={new SomeClass()}>
   <App />
</SomeContext.Provider>

but when I want to access it through with export default withContext(SomeComponent) by this.props.server.someFunc() it showed props is undefined in the classless hook function.

how can I achieve this.props in react hook

Edit:

SomeClass is not React inheriting class and its look like it.

class SomeClass {
  someFunc = (id) => axios('api endpoints')
}

SomeComponent

const SomeComponent = () => {
...

useEffect(() => {
   this.props.server.someFunc(id).then(...).catch(...)
}, ...)

...
}

It should be value={<SomeClass/>}, and you better show us the code instead of describing what you trying to do. See How to create a Minimal, Reproducible Example — Dennis Vash
– Dennis Vash, Commented Nov 17, 2020 at 18:32
Just show the code... You don't have this.props in function components. — Dennis Vash
– Dennis Vash, Commented Nov 17, 2020 at 18:36
Please take a look in React docs, that's not how you use Context, see useContext — Dennis Vash
– Dennis Vash, Commented Nov 17, 2020 at 18:48

Dennis Vash · Accepted Answer · 2020-11-18 11:44:06Z

1

In the regular case, you need to export the Context, then import it and use it within useContext:

export const SomeContext = React.createContext(null);


// Usage
import { SomeContext } from '..';

const SomeComponent = () => {
  const server = useContext(SomeContext);

  useEffect(() => {
    server.someFunc(id);
  });
};

But in your case, since you using HOC, you have the server within the prop it self:

const SomeComponent = (props) => {
  useEffect(() => {
    props.server.someFunc(id);
  });
};

answered Nov 18, 2020 at 11:44

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React: Class Based Context API to Hook Based context API

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related