Debugging React can sometimes feel like chasing shadows. I still remember one of my first React projects where I was stuck for hours because a simple component refused to render. No error messages, no warnings, just a blank screen.
Over the years, I’ve run into this issue multiple times, both in personal projects and while helping clients in the USA. The good news is that most of the time, the fixes are easy once you know where to look.
In this tutorial, I’ll walk you through the most common reasons why a React component doesn’t render, and I’ll show you exactly how to fix them with working code examples.
Method 1 – Check if ReactDOM.render (or createRoot) is Used Correctly
One of the most common mistakes I see is forgetting to render the root component properly.
Here’s the wrong way (this won’t render anything):
// index.js
import React from "react";
import App from "./App";
// ❌ Missing ReactDOM import and render callAnd here’s the correct way:
// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);You can refer to the screenshot below to see the output.
Without calling ReactDOM.createRoot().render(), React has no idea where to mount your component. Always double-check that your index.html has a <div id=”root”></div> and that you’re rendering into it.
Method 2 – Verify Component Import and Export
Another rookie mistake I made early in my career was mixing up default and named exports.
Here’s an example that won’t render:
// App.js
import React from "react";
function App() {
return <h1>Hello from App</h1>;
}
export { App }; // ❌ Named export// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App"; // ❌ Importing as default
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);Here’s the fixed version:
// App.js
import React from "react";
export default function App() {
return <h1>Hello from App</h1>;
}// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App"; // ✅ Correct default import
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);You can refer to the screenshot below to see the output.
Always make sure your import/export style matches. If you export with the default, import without curly braces. If you use named exports, import with curly braces.
Method 3 – Check for Typos in Component Names
React treats lowercase tags as HTML elements. If you accidentally start your component name with a lowercase letter, React assumes it’s a built-in DOM element and won’t render your component.
Here’s the wrong way:
// WrongComponent.js
export default function wrongcomponent() {
return <h2>This won’t render!</h2>;
}// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import wrongcomponent from "./WrongComponent";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<wrongcomponent />); // ❌ LowercaseHere’s the correct way:
// CorrectComponent.js
export default function CorrectComponent() {
return <h2>This will render!</h2>;
}// index.js
import React from "react";
import ReactDOM from "react-dom/client";
import CorrectComponent from "./CorrectComponent";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<CorrectComponent />); // ✅ UppercaseYou can refer to the screenshot below to see the output.
Always start component names with a capital letter.
Method 4 – Fix State or Props Issues
Sometimes the component renders, but it looks like it’s not rendering because the UI is blank due to missing props or incorrect state handling.
Here’s a broken example:
// UserCard.js
export default function UserCard({ name }) {
return <h3>{name}</h3>;
}
// App.js
import UserCard from "./UserCard";
export default function App() {
return <UserCard />; // ❌ No props passed
}This will render nothing because name is undefined.
Here’s the fixed version:
// App.js
import UserCard from "./UserCard";
export default function App() {
return <UserCard name="John Doe (California)" />; // ✅ Passing props
}You can refer to the screenshot below to see the output.
Always check if your component depends on props or state. If props are missing, the UI may appear blank.
Method 5 – Check for JavaScript Errors in Developer Tools
Sometimes the component doesn’t render because of a silent error in your code.
Example of a bug:
// App.js
export default function App() {
const user = null;
return <h2>{user.name}</h2>; // ❌ Cannot read property 'name' of null
}This will throw an error and stop rendering.
Fix:
// App.js
export default function App() {
const user = null;
return <h2>{user ? user.name : "Guest User"}</h2>; // ✅ Safe check
}Always open your browser’s developer console (F12 in Chrome) and check for red error messages.
Method 6 – Ensure Routes are Configured Properly (React Router)
If you’re using React Router, a common issue is setting up routes incorrectly.
Here’s a broken example:
// App.js
import { BrowserRouter, Route } from "react-router-dom";
import Home from "./Home";
export default function App() {
return (
<BrowserRouter>
<Route path="/" component={Home} /> {/* ❌ Old v5 syntax */}
</BrowserRouter>
);
}Here’s the fixed version for React Router v6:
// App.js
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";
export default function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} /> {/* ✅ Correct v6 syntax */}
</Routes>
</BrowserRouter>
);
}If you’re using React Router, always confirm which version you’re on and use the correct syntax.
Method 7 – Render Lists Without Keys
Sometimes components don’t render properly when mapping arrays without unique keys.
Here’s an example with a bug:
// App.js
export default function App() {
const users = ["Alice", "Bob", "Charlie"];
return (
<div>
{users.map(user => (
<p>{user}</p> // ❌ Missing key
))}
</div>
);
}Here’s the fixed version:
// App.js
export default function App() {
const users = ["Alice", "Bob", "Charlie"];
return (
<div>
{users.map((user, index) => (
<p key={index}>{user}</p> // ✅ Added key
))}
</div>
);
}Always add a unique key when rendering lists in React.
When a React component doesn’t render, it’s usually due to a small oversight: missing ReactDOM.render, incorrect imports/exports, lowercase component names, missing props, or silent errors.
Over the last decade, I’ve learned that most rendering issues can be solved by carefully checking the console, reviewing the component’s import/export, and ensuring the root render call is correct.
If you follow the methods I outlined above, you should be able to quickly spot and fix why your React component isn’t showing up.
You may also read:
- Use the React Data Grid Component
- Call a Function Inside a Child Component from the Parent in React
- Explore Pure Components in React
- Build a Search Bar Component in React
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
