React Common Errors

by

React beginners often face errors while creating components, writing JSX, importing files, using hooks, or rendering data. The good news is that most React errors are easy to identify once you understand what caused them and how to fix them.

This chapter covers the most common React errors you’ll encounter while learning React with Vite. You’ll learn how to recognize the error message, understand why it happens, and fix it correctly.

Why React Shows Errors

React applications are written using JavaScript and JSX. Before your application runs in the browser, Vite and Babel compile your code. If something is wrong, React displays an error message in the terminal or browser.

Common reasons include:

  • JSX syntax mistakes.
  • Missing imports or exports.
  • Incorrect component names.
  • Undefined variables.
  • Invalid hook usage.
  • Missing keys in lists.
  • Incorrect props usage.
  • Typing mistakes.

Learning to read React error messages is an important developer skill.

Types of React Errors

Understanding the category helps you debug faster.

JSX Syntax Errors

JSX syntax errors happen when JSX is written incorrectly.

Missing Closing Tag

Incorrect:

JavaScript

function App() {
  return (
    <div>
      <h1>Welcome to React
    </div>
  );
}

React shows an error because <h1> is never closed.

Correct:

JavaScript

function App() {
  return (
    <div>
      <h1>Welcome to React</h1>
    </div>
  );
}

Missing Parent Element

Incorrect:

JavaScript

function App() {
  return (
    <h1>React</h1>
    <p>Learning JSX</p>
  );
}

JSX must return a single parent element.

Correct:

JavaScript

function App() {
  return (
    <div>
      <h1>React</h1>
      <p>Learning JSX</p>
    </div>
  );
}

Or use a Fragment:

JavaScript

function App() {
  return (
    <>
      <h1>React</h1>
      <p>Learning JSX</p>
    </>
  );
}

Unclosed Curly Braces

Incorrect:

JavaScript

function App() {
  const name = "Arafat";

  return <h1>Hello {name</h1>;
}

Correct:

JavaScript

function App() {
  const name = "Arafat";

  return <h1>Hello {name}</h1>;
}

Always close {} properly.

Reference Error: Variable Is Not Defined

One of the most common React errors is using a variable that doesn’t exist.

Incorrect:

JavaScript

function App() {
  return <h1>{username}</h1>;
}

Error:

ReferenceError: username is not defined

Correct:

JavaScript

function App() {
  const username = "Arafat";

  return <h1>{username}</h1>;
}

Always declare variables before using them inside JSX.

Component Is Not Defined

Incorrect:

JavaScript

function App() {
  return <Profile />;
}

If Profile is not imported, React throws:

Profile is not defined

Correct:

JavaScript

import Profile from "./Profile";

function App() {
  return <Profile />;
}

Every component used in JSX must either:

  • Be declared in the same file.
  • Be imported from another file.

Incorrect Component Name

React components must begin with a capital letter.

Incorrect:

JavaScript

function header() {
  return <h1>Header</h1>;
}

function App() {
  return <header />;
}

React treats <header /> as an HTML tag.

Correct:

JavaScript

function Header() {
  return <h1>Header</h1>;
}

function App() {
  return <Header />;
}

Rule

|
Incorrect

|

Correct

|
| — | — |
|

header()

|

Header()

|
|

<header />

|

<Header />

|
|

profile()

|

Profile()

|
|

<profile />

|

<Profile />

|

Always capitalize React component names.

Import Errors

Wrong Default Import

Profile.jsx

JavaScript

export default function Profile() {
  return <h1>Profile</h1>;
}

Incorrect import:

JavaScript

import { Profile } from "./Profile";

Error:

Module does not provide an export named 'Profile'

Correct:

JavaScript

import Profile from "./Profile";

Wrong Named Import

Profile.jsx

JavaScript

export function Profile() {
  return <h1>Profile</h1>;
}

Incorrect:

JavaScript

import Profile from "./Profile";

Correct:

JavaScript

import { Profile } from "./Profile";

File Path Errors

Incorrect:

JavaScript

import Header from "./components/header";

If the filename is Header.jsx, Vite cannot find it.

Correct:

JavaScript

import Header from "./components/Header";

Tips

  • File names are case-sensitive on many systems.
  • Double-check folder names.
  • Use the correct extension only when needed.

Export Errors

Forgot to Export Component

Incorrect:

JavaScript

function Header() {
  return <h1>Header</h1>;
}

Another file imports it:

JavaScript

import Header from "./Header";

React cannot import it.

Correct:

JavaScript

export default function Header() {
  return <h1>Header</h1>;
}

Or:

JavaScript

export function Header() {
  return <h1>Header</h1>;
}

Rendering Object Error

Incorrect:

JavaScript

const user = {
  name: "Arafat",
  age: 22
};

return <p>{user}</p>;

Error:

Objects are not valid as a React child.

Correct:

JavaScript

return <p>{user.name}</p>;

Or render individual properties.

Rendering Array Without map()

Incorrect:

JavaScript

const skills = ["HTML", "CSS", "React"];

return <p>{skills}</p>;

React renders:

HTML,CSS,React

This works but isn’t ideal.

Better:

JavaScript

<ul>
  {skills.map((skill) => (
    <li key={skill}>{skill}</li>
  ))}
</ul>

Now each item becomes its own React element.

Missing Key in Lists

Incorrect:

JavaScript

const skills = ["HTML", "CSS", "React"];

<ul>
  {skills.map((skill) => (
    <li>{skill}</li>
  ))}
</ul>

React warning:

Each child in a list should have a unique "key" prop.

Correct:

JavaScript

<ul>
  {skills.map((skill) => (
    <li key={skill}>{skill}</li>
  ))}
</ul>

Keys help React update lists efficiently.

Duplicate Keys

Incorrect:

JavaScript

const users = [
  { id: 1, name: "A" },
  { id: 1, name: "B" }
];

Both items have the same key.

Correct:

JavaScript

<li key={user.id}>{user.name}</li>

Ensure every key is unique.

Cannot Read Property of Undefined

Incorrect:

JavaScript

const user = undefined;

return <p>{user.name}</p>;

Error:

Cannot read properties of undefined

Correct:

JavaScript

return <p>{user?.name}</p>;

Or:

JavaScript

return <p>{user ? user.name : "Guest"}</p>;

Optional chaining prevents runtime crashes.

Using class Instead of className

Incorrect:

JavaScript

<div class="card">
  React
</div>

React warning or error.

Correct:

JavaScript

<div className="card">
  React
</div>

JSX uses className.

Using for Instead of htmlFor

Incorrect:

JavaScript

<label for="email">Email</label>

Correct:

JavaScript

<label htmlFor="email">Email</label>

htmlFor connects the label with the input.

Style Syntax Error

Incorrect:

JavaScript

<p style="color:red">
  Hello
</p>

Correct:

JavaScript

<p style={{ color: "red" }}>
  Hello
</p>

Remember:

  • Outer {} → JavaScript expression.
  • Inner {} → JavaScript object.

Inline Style Property Error

Incorrect:

JavaScript

style={{
  background-color: "red"
}}

Correct:

JavaScript

style={{
  backgroundColor: "red"
}}

React uses camelCase CSS property names.

Common CamelCase Examples

Using if Directly Inside JSX

Incorrect:

JavaScript

return (
  <div>
    {if (loggedIn) {
      <p>Welcome</p>;
    }}
  </div>
);

Correct:

JavaScript

{loggedIn && <p>Welcome</p>}

Or:

JavaScript

{loggedIn ? <p>Welcome</p> : <p>Please Login</p>}

JSX accepts expressions, not statements.

&& Rendering Displays 0

Incorrect:

JavaScript

const count = 0;

return (
  <div>
    {count && <p>Items Available</p>}
  </div>
);

React displays:

0

Correct:

JavaScript

{count > 0 && <p>Items Available</p>}

Always compare numeric values explicitly.

Hook Error: Invalid Hook Call

Incorrect:

JavaScript

function App() {
  if (true) {
    const [count, setCount] = useState(0);
  }

  return <p>Hello</p>;
}

Error:

Invalid Hook Call

Correct:

JavaScript

function App() {
  const [count, setCount] = useState(0);

  return <p>{count}</p>;
}

Hooks must be called:

  • At the top level.
  • Inside React components.
  • Not inside loops, conditions, or nested functions.

Forgot to Import useState

Incorrect:

JavaScript

function App() {
  const [count, setCount] = useState(0);

  return <p>{count}</p>;
}

Error:

useState is not defined

Correct:

JavaScript

import { useState } from "react";

Always import hooks before using them.

State Doesn’t Update Immediately

Incorrect expectation:

JavaScript

setCount(count +