Why I can't import Constants from another file in Reactjs?

Question

I was practicing React-Routing, I want to separate constants in another file away from my App.js. Basically, these constants are content for my pages that I want to be editable in a separate environment. But after importing them to App.js, it gives error "'React' must be in scope when using JSX react/react-in-jsx-". Here is my App.js code:

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import {Home,About} from "./Constants.js";

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <Route exact path="/" component={Home} />
          <Route exact path="/about" component={About} />
        </div>
      </Router>
    );
  }
}

export default App;

and Constants in Constants.js:

const Home = (
  <div>
    <h2>Home</h2>
  </div>
);

const About = (
  <div>
    <h2>About</h2>
  </div>
);

export { Home, About };

Is the error not self explanatory? Which part of it do you not understand? — Felix Kling
– Felix Kling, Commented Jul 13, 2018 at 21:34
Does this answer your question? 'React' must be in scope when using JSX react/react-in-jsx-scope? — Henry
– Henry, Commented Oct 24, 2022 at 21:28

Tholle · Accepted Answer · 2018-07-13 21:25:13Z

3

JSX gets compiled into React.createElement calls, so you need to import React if you are using JSX.

You should also write stateless functional components as functions, instead of as a React element directly.

import React from 'react';

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
);

const About = () => (
  <div>
    <h2>About</h2>
  </div>
);

export { Home, About };

answered Jul 13, 2018 at 21:25

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

Collectives™ on Stack Overflow

Why I can't import Constants from another file in Reactjs?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related