How to use Context API in a class component

Question

I'm working on a really big project with translations. I used Formspree to handle the forms. I want to translate that as well.

This is the code given by Formspree:

import React, { useContext } from "react";
import { LanguageContext } from "../../../../App";
import './Form.css';

export default class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.submitForm = this.submitForm.bind(this);
        this.state = {
            status: ""
        };
    }
    
    render() {
        const { status } = this.state;
        return (
            <form
                onSubmit={this.submitForm}
                action="https://formspree.io/f/********"
                method="POST"
            >
                {/* <!-- add your custom form HTML here --> */}
                <div className="container">
                    <label style={{ color: 'black', fontSize: '18px' }}>Name <span style={{ color: '#f14b4d' }}>(Required)</span>:</label>
                    <input type="text" name="Name" className='form-control mb-3' placeholder='Enter Your Name' required />
                    <label style={{ color: 'black', fontSize: '18px' }}>Email <span style={{ color: '#f14b4d' }}>(Required)</span>:</label>
                    <input type="email" name="Email" className='form-control mb-3' placeholder='Enter Your Email' required />
                    <label style={{ color: 'black', fontSize: '18px' }}>Message <span style={{ color: '#f14b4d' }}>(Required)</span>:</label>
                    <textarea type="text" name="Message" className='form-control mb-3' rows={3} placeholder='Tell Us Your Message' required />
                    <label style={{ color: 'black', fontSize: '18px' }}>Phone Number With Country Code <span style={{ color: '#6487FF' }}>(Optional)</span>:</label>
                    <input type="text" name="Phone" className='form-control mb-3' placeholder='Enter Your Phone Number' />
                    {status === "SUCCESS" ? <p className='mt-4' style={{ color: 'black' }}>Thanks For Your Message! Your Message Is Successfully Submitted!</p> : <button className='submit-contact-btn mt-3 mb-4'>Submit</button>}
                    {status === "ERROR" && <p style={{ color: 'black' }}>Oops! There was an error. Please Try Again</p>}
                </div>
            </form>
        );
    }

    submitForm(ev) {
        ev.preventDefault();
        const form = ev.target;
        const data = new FormData(form);
        const xhr = new XMLHttpRequest();
        xhr.open(form.method, form.action);
        xhr.setRequestHeader("Accept", "application/json");
        xhr.onreadystatechange = () => {
            if (xhr.readyState !== XMLHttpRequest.DONE) return;
            if (xhr.status === 200) {
                form.reset();
                this.setState({ status: "SUCCESS" });
            } else {
                this.setState({ status: "ERROR" });
            }
        };
        xhr.send(data);
    }
}

It's a mess for me because I don't work with class components I work with functional components.

I was trying to add my context in that file and it shows the exact same error every time.

Here's the error:

I'm trying to put this code there:

const [isBangla, setIsBangla] = useContext(LanguageContext)

I tried putting this line of code many times but the error is same.

score 6 · Accepted Answer · answered Mar 31 '21 at 14:56

6

In your class component, you can define the contextType:

static contextType = LanguageContext;

Then you are able to use it via this.context, for example,

this.context.setIsBangla()

answered Mar 31 '21 at 14:56

Adam Cai

380
1
10

@ajeetshah beated me. :-) – Adam Cai Mar 31 '21 at 14:57
It's saying Cannot access 'LanguageContext' before initialization – Programmer Snigdho Mar 31 '21 at 15:03
I wanted to do conditional rendering – Programmer Snigdho Mar 31 '21 at 15:04
If you can provide how you define 'LanguageContext', then it will help us to know why. – Adam Cai Mar 31 '21 at 15:26
```export default class MyForm extends React.Component {static contextType = LanguageContext; constructor(props) { super(props); this.submitForm = this.submitForm.bind(this); this.state = { status: "" }; }``` – Programmer Snigdho Apr 01 '21 at 07:34
I was asking what 'LanguageContext' looks like. I saw it is imported from App.js. It's better to create a LanguageContext.js, and then import it to the component using it. – Adam Cai Apr 01 '21 at 13:27
```export const LanguageContext = createContext()``` – Programmer Snigdho Apr 01 '21 at 14:06
Yeah, it worked after a bit of change in the code. – Programmer Snigdho Apr 01 '21 at 14:33
Can we see your App.js? Basically, you need LanguageContext, Provider, e.g.:``, and Consumer, in this case, `static contextType = LanguageContext;`, and then you are able to use this.context to access contextValue. – Adam Cai Apr 01 '21 at 14:35
It's working now. I changed it from app.js to LanguageContext.js – Programmer Snigdho Apr 01 '21 at 15:50
Glad you figured it out. :-) – Adam Cai Apr 01 '21 at 16:34

Ajeet Shah · Answer 2 · 2021-03-31T15:03:54.080

1

To consume a context inside class component, you can assign a contextType to read the current context. Using contextType lets you consume the nearest current value of that Context type using this.context. You can reference this in any of the lifecycle methods including the render function.

So, you can write:

export default class MyForm extends React.Component {
  static contextType = LanguageContext // assign static contextType
    constructor(props) {
      //....
    }

Now, you can access context values using this.context (which will be an array as [isBangla, setIsBangla] for your example) in MyForm component.

Note that, you can not use useContext hook in a class component as react-hooks can only be used in Functional Components.

edited Mar 31 '21 at 15:03

answered Mar 31 '21 at 14:55

Ajeet Shah

18,551
8
57
87

It's saying Cannot access 'LanguageContext' before initialization – Programmer Snigdho Mar 31 '21 at 15:00
I wanted to do conditional rendering – Programmer Snigdho Mar 31 '21 at 15:04
I'm going to check it tomorrow my brain is not properly working due to those errors. – Programmer Snigdho Mar 31 '21 at 15:14
It's a bit old. v16.13.1 – Programmer Snigdho Apr 01 '21 at 07:33
I started this in 2020 October and completed it as well. But, now I'm redesigning it. And I didn't translated the form at that time I'm translating it now. – Programmer Snigdho Apr 01 '21 at 07:38
1

It's now completed after making the context in contexts folder. And a bit change in the code. – Programmer Snigdho Apr 01 '21 at 14:35

How to use Context API in a class component

2 Answers2