Why Is My React Component Not Rendering? Fix It Step by Step

You build a customer support dashboard for a company in Austin, Texas. The page loads, the navigation appears, and your main app works, but the new customer card you added does not show up anywhere.

I have hit this problem many times in real React projects. Usually, React is not the actual problem. A small issue in the component export, import, JSX return, conditional logic, props, state, or browser console stops the UI from appearing.

Let’s walk through the most common reasons a React component is not rendering and fix each one with a practical customer support dashboard example.

What Does React Component Rendering Mean?

A React component is a reusable JavaScript function that returns UI. React takes the JSX that your component returns and places matching elements into the browser DOM, which is the page structure that the browser displays.

JSX lets you write HTML-like UI markup inside JavaScript. For example, this component returns a heading:

// WelcomeMessage.jsx
function WelcomeMessage() {
  return <h1>Welcome to the Austin Support Dashboard</h1>;
}

export default WelcomeMessage;

Sample output:

Welcome to the Austin Support Dashboard

You can see the output in the screenshot below.

The component itself does not appear until another component imports and uses it:

// App.jsx
import WelcomeMessage from "./WelcomeMessage";

function App() {
  return (
    <main>
      <WelcomeMessage />
    </main>
  );
}

export default App;

Sample output in the browser:

Welcome to the Austin Support Dashboard

You can see the output in the screenshot below.

If you create WelcomeMessage.jsx but never add <WelcomeMessage /> inside App.jsx or another rendered component, React has nothing to display. If you are new to component structure, review this guide on how to create your first React application.

Why Is a React Component Not Rendering?

A React component is not rendering when React cannot reach it, cannot run it, or receives no visible JSX to show. Start your diagnosis with this checklist:

1. Confirm that a parent component uses the component.
2. Check the export and import syntax.
3. Make sure the component returns JSX.
4. Check conditional rendering conditions.
5. Verify props and state values.
6. Open the browser console for runtime errors.
7. Check CSS that may hide the rendered UI.

The next sections show how to fix each issue using one consistent example: a customer support dashboard for Northstar Help Desk in Austin, Texas.

React Component Not Rendering Because It Is Not Used

Creating a component file does not automatically add it to the page. You must import the component into a parent and use it in JSX.

Incorrect example

// CustomerCard.jsx
function CustomerCard() {
  return (
    <article>
      <h2>John Miller</h2>
      <p>Austin, Texas</p>
    </article>
  );
}

export default CustomerCard;

// App.jsx
function App() {
  return (
    <main>
      <h1>Northstar Help Desk</h1>
    </main>
  );
}

export default App;

Sample output:

Northstar Help Desk

You can see the output in the screenshot below.

The CustomerCard component does not appear because App.jsx never imports or renders it.

Correct example

// CustomerCard.jsx
function CustomerCard() {
  return (
    <article>
      <h2>John Miller</h2>
      <p>Austin, Texas</p>
    </article>
  );
}

export default CustomerCard;

// App.jsx
import CustomerCard from "./CustomerCard";

function App() {
  return (
    <main>
      <h1>Northstar Help Desk</h1>
      <CustomerCard />
    </main>
  );
}

export default App;

Sample output in the browser:

Northstar Help Desk

John Miller
Austin, Texas

The <CustomerCard /> line tells React to run the CustomerCard function and add its JSX to the page.

React Component Not Rendering Due to Import Errors

An incorrect import is one of the fastest ways to make a React component disappear. Your import must match the component export type and the file path exactly.

Default export and default import

Use this pattern when the component has export default.

// CustomerCard.jsx
function CustomerCard() {
  return <p>Emily Carter from Seattle, Washington</p>;
}

export default CustomerCard;

// App.jsx
import CustomerCard from "./CustomerCard";

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

export default App;

Sample output:

Emily Carter from Seattle, Washington

Named export and named import

Use curly braces when the component uses a named export.

// CustomerCard.jsx
export function CustomerCard() {
  return <p>Emily Carter from Seattle, Washington</p>;
}

// App.jsx
import { CustomerCard } from "./CustomerCard";

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

export default App;

Sample output:

Emily Carter from Seattle, Washington

A common mistake mixes these patterns:

import CustomerCard from "./CustomerCard";

That import fails if CustomerCard.jsx only contains:

export function CustomerCard() {
  return <p>Emily Carter from Seattle, Washington</p>;
}

React usually shows an error such as “does not provide an export named default.” Check your terminal and browser console carefully. For more export patterns, see this guide to React component export syntax.

React Component Not Rendering Without a Return Statement

A functional component must return JSX, null, or another valid React value. If you use curly braces in an arrow function, you need an explicit return.

Incorrect arrow function

// CustomerCard.jsx
const CustomerCard = () => {
  <article>
    <h2>John Miller</h2>
    <p>Austin, Texas</p>
  </article>;
};

export default CustomerCard;

// App.jsx
import CustomerCard from "./CustomerCard";

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

export default App;

Sample output:

The page shows no customer card.

The arrow function runs, but it returns undefined because it has no return statement.

Correct arrow function

// CustomerCard.jsx
const CustomerCard = () => {
  return (
    <article>
      <h2>John Miller</h2>
      <p>Austin, Texas</p>
    </article>
  );
};

export default CustomerCard;

// App.jsx
import CustomerCard from "./CustomerCard";

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

export default App;

Sample output:

John Miller
Austin, Texas

You can also use parentheses for an implicit return:

// CustomerCard.jsx
const CustomerCard = () => (
  <article>
    <h2>John Miller</h2>
    <p>Austin, Texas</p>
  </article>
);

export default CustomerCard;

Sample output:

John Miller
Austin, Texas

I prefer the explicit return when a component includes several lines of logic. It makes debugging easier.

React Component Not Rendering Because of Conditional Logic

Conditional rendering means showing UI only when a JavaScript condition evaluates to true. A wrong condition often makes a valid component look broken.

Imagine your support dashboard should show selected customer details only after an agent clicks a button.

// CustomerDetails.jsx
function CustomerDetails({ customer }) {
  if (!customer) {
    return null;
  }

  return (
    <section>
      <h2>{customer.name}</h2>
      <p>{customer.location}</p>
      <p>Open tickets: {customer.openTickets}</p>
    </section>
  );
}

export default CustomerDetails;

// App.jsx
import { useState } from "react";
import CustomerDetails from "./CustomerDetails";

function App() {
  const [selectedCustomer, setSelectedCustomer] = useState(null);

  const showCustomer = () => {
    setSelectedCustomer({
      name: "John Miller",
      location: "Austin, Texas",
      openTickets: 3,
    });
  };

  return (
    <main>
      <h1>Northstar Help Desk</h1>

      <button onClick={showCustomer}>Show John Miller</button>

      <CustomerDetails customer={selectedCustomer} />
    </main>
  );
}

export default App;

Sample output before clicking the button:

Northstar Help Desk

[Show John Miller]

Sample output after clicking “Show John Miller”:

Northstar Help Desk

[Show John Miller]

John Miller
Austin, Texas
Open tickets: 3

The customer value starts as null, so CustomerDetails returns null. Returning null tells React to render nothing. After the button click, the state changes and React renders the customer details.

State stores data that can change while a user interacts with a component. The useState hook adds state to a functional component. Learn more about user interactions in this guide on handling events in React.

Pro Tip: I always log the condition before I change component code. Most “component not rendering” bugs I find come from a false condition, an empty array, or a prop that never reached the child component.

React Component Not Rendering Due to Missing Props

Props are values that a parent component sends to a child component. If a child expects a prop but the parent forgets to pass it, the component may show empty information or crash.

Incorrect props example

// CustomerCard.jsx
function CustomerCard({ customer }) {
  return (
    <article>
      <h2>{customer.name}</h2>
      <p>{customer.location}</p>
    </article>
  );
}

export default CustomerCard;

// App.jsx
import CustomerCard from "./CustomerCard";

function App() {
  return (
    <main>
      <h1>Northstar Help Desk</h1>
      <CustomerCard />
    </main>
  );
}

export default App;

Sample output:

The browser console shows an error because customer is undefined.

customer.name fails because the parent never supplies a customer object.

Correct props example

// CustomerCard.jsx
function CustomerCard({ customer }) {
  return (
    <article>
      <h2>{customer.name}</h2>
      <p>{customer.location}</p>
      <p>Priority: {customer.priority}</p>
    </article>
  );
}

export default CustomerCard;

// App.jsx
import CustomerCard from "./CustomerCard";

function App() {
  const customer = {
    name: "Emily Carter",
    location: "Seattle, Washington",
    priority: "High",
  };

  return (
    <main>
      <h1>Northstar Help Desk</h1>
      <CustomerCard customer={customer} />
    </main>
  );
}

export default App;

Sample output:

Northstar Help Desk

Emily Carter
Seattle, Washington
Priority: High

Add a temporary console.log(customer) inside the child component when you suspect a props issue. You can also provide a safe fallback while data loads:

// CustomerCard.jsx
function CustomerCard({ customer }) {
  if (!customer) {
    return <p>Customer details are loading...</p>;
  }

  return (
    <article>
      <h2>{customer.name}</h2>
      <p>{customer.location}</p>
    </article>
  );
}

export default CustomerCard;

Sample output when no customer prop exists:

Customer details are loading...

For a deeper explanation of parent-to-child data flow, read how props work in React.

React Component Not Rendering After a State Update

React uses state changes to decide when it needs to update the screen. You must create a new value when updating arrays or objects. This is an immutable update.

An immutable update creates a new copy of data instead of changing the existing value. Directly changing an array or object can cause confusing UI behavior in a React application.

Incorrect state update

// App.jsx
import { useState } from "react";

function App() {
  const [customers, setCustomers] = useState([
    { id: 1, name: "John Miller", location: "Austin, Texas" },
  ]);

  const addCustomer = () => {
    customers.push({
      id: 2,
      name: "Emily Carter",
      location: "Seattle, Washington",
    });

    setCustomers(customers);
  };

  return (
    <main>
      <h1>Northstar Help Desk</h1>

      <button onClick={addCustomer}>Add Emily Carter</button>

      <ul>
        {customers.map((customer) => (
          <li key={customer.id}>
            {customer.name} — {customer.location}
          </li>
        ))}
      </ul>
    </main>
  );
}

export default App;

Sample output before clicking the button:

Northstar Help Desk

[Add Emily Carter]

John Miller — Austin, Texas

Sample output after clicking the button:

The result may not update reliably because the code changes the existing state array.

The push() array method changes the original customers array. Avoid that pattern in React state.

Correct immutable state update

// App.jsx
import { useState } from "react";

function App() {
  const [customers, setCustomers] = useState([
    { id: 1, name: "John Miller", location: "Austin, Texas" },
  ]);

  const addCustomer = () => {
    const newCustomer = {
      id: 2,
      name: "Emily Carter",
      location: "Seattle, Washington",
    };

    setCustomers((currentCustomers) => [
      ...currentCustomers,
      newCustomer,
    ]);
  };

  return (
    <main>
      <h1>Northstar Help Desk</h1>

      <button onClick={addCustomer}>Add Emily Carter</button>

      <ul>
        {customers.map((customer) => (
          <li key={customer.id}>
            {customer.name} — {customer.location}
          </li>
        ))}
      </ul>
    </main>
  );
}

export default App;

Sample output before clicking the button:

Northstar Help Desk

[Add Emily Carter]

John Miller — Austin, Texas

Sample output after clicking the button:

Northstar Help Desk

[Add Emily Carter]

John Miller — Austin, Texas
Emily Carter — Seattle, Washington

The spread operator creates a new array. React receives a new reference, runs the component again, and updates the list rendering output.

React Component Not Rendering After an API Call

A component that depends on an API call may initially render with no data. Your UI should handle loading, error, and success states clearly.

The following example simulates loading customer data. It uses useEffect, a React hook that runs code after React updates the screen.

// CustomerPanel.jsx
import { useEffect, useState } from "react";

function CustomerPanel() {
  const [customer, setCustomer] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    const loadCustomer = async () => {
      try {
        setLoading(true);
        setError("");

        await new Promise((resolve) => setTimeout(resolve, 1000));

        setCustomer({
          name: "Michael Davis",
          location: "Denver, Colorado",
          openTickets: 2,
        });
      } catch (requestError) {
        setError("We could not load the customer details.");
      } finally {
        setLoading(false);
      }
    };

    loadCustomer();
  }, []);

  if (loading) {
    return <p>Loading customer details...</p>;
  }

  if (error) {
    return <p role="alert">{error}</p>;
  }

  if (!customer) {
    return <p>No customer details are available.</p>;
  }

  return (
    <section>
      <h2>{customer.name}</h2>
      <p>{customer.location}</p>
      <p>Open tickets: {customer.openTickets}</p>
    </section>
  );
}

export default CustomerPanel;

// App.jsx
import CustomerPanel from "./CustomerPanel";

function App() {
  return (
    <main>
      <h1>Northstar Help Desk</h1>
      <CustomerPanel />
    </main>
  );
}

export default App;

Sample output immediately after page load:

Northstar Help Desk

Loading customer details...

Sample output after one second:

Northstar Help Desk

Michael Davis
Denver, Colorado
Open tickets: 2

This structure prevents your component from trying to read customer.name before the customer data exists. It also gives users clear feedback if an API request fails.

React Component Not Rendering Because CSS Hides It

Sometimes React renders your component correctly, but CSS makes it invisible. Check for display: none, visibility: hidden, zero height, zero width, matching text and background colors, or an element behind another layer.

// CustomerCard.jsx
function CustomerCard() {
  return (
    <article className="customer-card">
      <h2>Emily Carter</h2>
      <p>Seattle, Washington</p>
      <p>Priority: High</p>
    </article>
  );
}

export default CustomerCard;

// App.jsx
import CustomerCard from "./CustomerCard";
import "./App.css";

function App() {
  return (
    <main className="dashboard">
      <h1>Northstar Help Desk</h1>
      <CustomerCard />
    </main>
  );
}

export default App;

/* App.css */
.dashboard {
  max-width: 700px;
  margin: 40px auto;
  font-family: Arial, sans-serif;
}

.customer-card {
  display: block;
  padding: 20px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f172a;
}

Sample output:

Northstar Help Desk

Emily Carter
Seattle, Washington
Priority: High

If you wrote this CSS instead, the card would exist in the DOM but stay hidden:

.customer-card {
  display: none;
}

Sample output:

Northstar Help Desk

The Emily Carter card does not appear.

Use your browser developer tools to inspect the element. If you can find the component markup in the Elements panel, React rendered it. Your CSS or layout causes the visibility issue.

React Component Not Rendering Due to a Runtime Error

A runtime error stops JavaScript while React tries to build the UI. The browser console usually points to the exact file and line.

This example fails because it tries to call .map() on undefined.

// TicketList.jsx
function TicketList({ tickets }) {
  return (
    <ul>
      {tickets.map((ticket) => (
        <li key={ticket.id}>{ticket.subject}</li>
      ))}
    </ul>
  );
}

export default TicketList;

// App.jsx
import TicketList from "./TicketList";

function App() {
  return (
    <main>
      <h1>Northstar Help Desk</h1>
      <TicketList />
    </main>
  );
}

export default App;

Sample output:

The page may fail to render.

The browser console shows an error similar to:
Cannot read properties of undefined (reading 'map')

Fix the component by giving tickets a safe default value.

// TicketList.jsx
function TicketList({ tickets = [] }) {
  if (tickets.length === 0) {
    return <p>No open support tickets.</p>;
  }

  return (
    <ul>
      {tickets.map((ticket) => (
        <li key={ticket.id}>{ticket.subject}</li>
      ))}
    </ul>
  );
}

export default TicketList;

// App.jsx
import TicketList from "./TicketList";

function App() {
  const tickets = [
    { id: 101, subject: "Password reset for John Miller" },
    { id: 102, subject: "Billing question from Emily Carter" },
  ];

  return (
    <main>
      <h1>Northstar Help Desk</h1>
      <TicketList tickets={tickets} />
    </main>
  );
}

export default App;

Sample output:

Northstar Help Desk

Password reset for John Miller
Billing question from Emily Carter

Use the browser console every time a component disappears unexpectedly. A visible error message gives you a much faster path than guessing.

Things to Keep in Mind

• Check the browser console: Runtime errors, failed imports, and undefined values often explain why a React component is not rendering.
• Return valid JSX: Every functional component must return JSX, null, a string, a number, or another valid React value.
• Use correct export syntax: Match default exports with default imports and named exports with named imports.
• Do not mutate state directly: Create a new array or object before calling a state updater so React can update reliably.
• Handle loading and errors: Show loading, error, and empty states when a component depends on asynchronous data.
• Inspect CSS and layout: Check whether display: none, visibility: hidden, zero dimensions, or stacking rules hide a component that React already rendered.

Frequently Asked Questions

A React component usually fails to render because React cannot reach it, the component returns no valid UI, a condition blocks it, data is missing, or an error interrupts rendering. Start with a simple parent-child setup, check the console, verify props and state, then add API logic and styling after the basic UI works. I hope you found this React debugging guide helpful.

You May Also Like

• How to check if a React component is rendered
• React component capitalization rules
• How to prevent unnecessary React component re-rendering
• How to reset component state in React
• How to force update a functional React component

Bijay Kumar

Bijay Kumar is an experienced Python and AI professional who enjoys helping developers learn modern technologies through practical tutorials and examples. His expertise includes Python development, Machine Learning, Artificial Intelligence, automation, and data analysis using libraries like Pandas, NumPy, TensorFlow, Matplotlib, SciPy, and Scikit-Learn. At PythonGuides.com, he shares in-depth guides designed for both beginners and experienced developers. More about us.

enjoysharepoint.com/