How to Fix the ‘TableData is Not Defined’ Error (react/jsx-no-undef) in React JS

When I first started building with React JS, I was excited to split my code into multiple components to keep things clean and modular. But then I ran into this error:

12:  'TableData' is not defined  react/jsx-no-undef

At first glance, it looked like a typo. I was sure I had defined TableData correctly in a separate file, so why was React throwing this at me, Turns out, the fix was simple but I learned something valuable about how component imports actually work in React.

Problem Explanation

Here’s what I did:
I had two files App.js and Table.js. In Table.js, I created a class component called TableData. Then, in App.js, I tried using <TableData /> directly without importing it properly.

Here’s the mistake I made:

 './Table.js'; // ❌ Wrong usage

This just executes the file. It doesn’t import the component I created inside react js. So when React tries to render <TableData />, it doesn’t recognize it and throws the react/jsx-no-undef error.

Correct Your Import Statement

The right way is to explicitly import the component by name. Here’s how I fixed it:

TableData from './Table.js'; // Proper way

By doing this, React knows that I want to use the TableData class from Table.js, and the error disappears.

Final Working Code

App.js

React, { Component } from 'react';
import './App.css';
import { Button } from 'react-bootstrap';
import TableData from './Table.js'; //  Correct import

class App extends Component {
  render() {
    return (
      <div className="App">
        <p>Edit <code>src/App.js</code> and save to reload.</p>
        <Button variant="primary">Primary</Button>
        <TableData />
      </div>
    );
  }
}

export default App;

Table.js

React, { Component } from 'react';
import { Table } from 'react-bootstrap';
import './App.css';

class TableData extends Component {
  render() {
    return (
      <Table striped bordered hover>
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td colSpan="2">Larry the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </Table>
    );
  }
}

export default TableData;

More Practice Ideas That Help Me Learn

After fixing the bug, I decided to go a bit further and try out a few more things to strengthen my skills:

Create Another Component

I made a Footer.js file with a basic message and imported it into App.js. It helped me understand how multiple components work together in one view.

Convert TableData to a Functional Component

I rewrote the TableData component like this:

React from 'react';
import { Table } from 'react-bootstrap';

const TableData = () => (
  <Table striped bordered hover>
    {/* same content */}
  </Table>
);

export default TableData;

Functional components are simpler and easier to manage, especially with React Hooks.

Pass Data as Props

Instead of hardcoding rows, I passed them from App.js like this:

<TableData rows={[{ id: 1, fname: "John", lname: "Doe", uname: "@jdoe" }]} />

Then used .map() in TableData to display the rows dynamically. It made my component reusable and more flexible.

Key Takeaway

If you’re new to React like me, remember this rule:

“If you use it, you must import it.”

Just referencing a file isn’t enough. React needs to know what component you’re using, and that only happens through named imports.

Final Thoughts

This small error taught me one of the most fundamental lessons in React: proper component structure and imports are everything. Once I understood that, my confidence in building more organized React apps grew instantly.

Whether you’re just starting or debugging a larger app, always double-check that every component used in JSX is properly imported. It’ll save you hours of head-scratching.