‘React’ must be in scope when using JSX react/react-in-jsx-scope

Total
0
Shares

React js throws the error, ‘React’ must be in scope when using JSX react/react-in-jsx-scope, when either we forget to include React in our script or make a spelling mistake. This is a common mistake done by developers who are in the phase of learning React JS.

Code Example

Let’s look at some code examples and check if they compile without errors –

import react, { Component}  from 'react';
import ReactDOM  from 'react-dom';

export default class SuperHero extends Component {

    constructor(props){
       super(props);
       this.state = {
           name: 'Ironman',
           weapon: 'Suit'
       }
    }
    render(){
        return(
            <span>Welcome {this.state.name}</span>
        );
    }
}

In the above code, we have created a class based component with state. The output returns a span having state value. But this code won’t compile and throw the error that React must be in scope when using JSX.

As the error clearly states that React is not loaded successfully. But why is that? You see we have already included it in the first line of our component. We will look at the solution in the next section.

Another example could be, when we forget to include React. Like this –

export default function App(props){
  return(
     <span>Where is React?</span>
  )
}

Solution

Let’s see what was wrong with the previous codes. When we included React we did it in the wrong way. We included react and not React. Did you get the difference? It’s uppercase.

Wrong way –

import react from 'react'

Correct way –

import React from 'react'

    Tweet this to help others

Sign Up for Our Newsletters

Get only the best articles delivered to your mail

You May Also Like

React convert JSON to CSV

React convert JSON to CSV using JSONToCSVConvertor function. Suppose you have a table (GUI react table tool) and you want to export it into excel, then this function will come…
View Post

How to use React?

This article will help you to know how to use React JS in web applications. React js creates static websites with optimized performance and speed. Step 1: Install create-react-app npm…
View Post