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'