How to fix Render Error createElement() in JSX in React

Question

I am trying to render my <App /> component and I keep getting TypeError: cannot read property createElement of undefined in the <Home /> , <Navbar /> and <Login /> components, when I try to compile the project. All errors indicate Line 9 in Index.js Here is what it contains:

Login.js Line 3

import { React } from "react";

const Login = () => (
  <div>
    ...

Home.js Line 4

import { React } from "react";
import { Link } from "react-router-dom";

const Home = () => (
  <div className="jumbotron">
 ...

Navbar.js Line 6

import { React } from "react";
import { NavLink } from "react-router-dom";

function Navbar() {
  const activeStyle = { color: "#F15B2A" };
  return (
    <nav>
    ...

I am interested in understanding why I keep getting errors at the component declaration in these components or is it something related to the return and render methods and how I call them?

Answer 1

Since you're rendering JSX in your component declaration files, you need to import React (default import) so that the JSX is recognized.

Change the following lines in all your files from:

import { React } from 'react'

to import React like this: (without brackets).

import React from 'react'