Consuming React useContext in a class based component in TypeSCript

Question

I am using our cartContext in a functional component like this:

import { CartContext } from '../../contexts/CartContext';

function staticCart(){
    const { increase, decrease, removeProduct } = useContext(CartContext);
    const { total, cartItems, shipping, netTotal, vat, finalTotal } = useContext(CartContext);
    return (
         <React.Fragment>Logic to use the complex cart contexts</React.Fragment>
    )
}

And this working fine as expected. And we have a class-based component, which looks like this:

import- statements

class StaticCart extends COmponent<RouteComponentProps<any>, State> {
    protected datatypes
    
    constructor(props: any) {
        ...
    }
    componentDidMount() {
        ...
    }

    render() {
        return (
            <React.Fragment>
                ...
            </React.Fragment>
        )
    }
}

I am trying to add the above same method(as in functional components) to the class Components.

I have tried:

Using as static type as mentioned here: https://www.taniarascia.com/using-context-api-in-react/#class-component
Place contexts in an external function based file, getting some other error
Placing the contexts inside Render But nothing seems to work. I am highly confused of the docs present, so any help would be great.

Shyam · Accepted Answer · 2021-06-03 07:44:19Z

2

Creating a context in React will give 2 things one is the Provider and Consumer . The Provider remains the same for both the class and functional components.

For functional components we can replace the Consumer with the useContext. But for class components you need to use Consumer

<CartContext.Consumer>
{(value) => { return ( .... )}}
</CartContext.Consumer>

answered Jun 3, 2021 at 7:44

Shyam

5,5171 gold badge15 silver badges23 bronze badges

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

Comments

user14899645 · Accepted Answer · 2021-06-03 08:18:31Z

0

I ended up using this approach,

import- statements

class StaticCart extends COmponent<RouteComponentProps<any>, State> {
    protected datatypes
    
    static contextType = CartCOntext;
    constructor(props: any) {
        ...
    }
    componentDidMount() {
        ...
    }

    render() {
        const { increase, decrease, removeProduct } = useContext(CartContext);
const { total, cartItems, shipping, netTotal, vat, finalTotal } = useContext(CartContext);
        return (
            <React.Fragment>
                ...
            </React.Fragment>
        )
    }
}

Which has worked for me.

answered Jun 3, 2021 at 8:18

user14899645

Collectives™ on Stack Overflow

Consuming React useContext in a class based component in TypeSCript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related