How to Fix React JS Error ‘Map’ is not define (react/jsx-no-undef)?

Are you working on a map feature using React JS and getting an error like this

Line 8:  'Map' is not defined  react/jsx-no-undef

If you’re anything like me, you probably stared at your screen wondering what just went wrong especially when the file is right there in your project! I’ve been there, and I want to walk you through exactly why this happens, how to fix it, and how to enhance your app with a working map input simulation.

Understand the Error

Let me show you what my original App.js looked like when I first ran into the issue:

import React, { Component } from 'react';
import './Map';  // This is where the issue starts

class App extends Component {
   render() {
     return (
         <div className="App">
            <Map />   // Error: 'Map' is not defined
         </div>
     );
   }
}

export default App;

Now, the error message is:

'react/jsx-no-undef': 'Map' is not defined

This means that React has no idea what <Map /> is. Even though I thought I had imported it, I hadn’t done it the right way.

What Wrong

This line is the culprit:

import './Map';

At first glance, it might seem like this is importing the Map component. But that’s not how JavaScript modules work. This import only loads the file for side effects, like global CSS or non-exported logic.

It does not actually bring in the Map function or class from Map.js. So when JSX tries to render <Map />, it doesn’t know what that is hence the 'Map' is not defined error.

The Fix

Here’s what I did to fix the issue.

First, I made sure Map.js had a default export like this:

// Map.js
import React from 'react';

function Map() {
  return <div>This is the map</div>;
}

export default Map;

Then in my App.js, I updated the import to actually bring in the component:

import React, { Component } from 'react';
import Map from './Map';  // Correct import

class App extends Component {
   render() {
     return (
         <div className="App">
            <Map />  {/* Now Map is defined */}
         </div>
     );
   }
}

export default App;

Add More Practice Functionality

Now that I had the base working, I thought why not add something interactive, I wanted a simple input where I could enter a city or location name and simulate it showing up on a “map preview.”

So I updated my Map.js to this:

import React, { useState } from 'react';

function Map() {
  const [location, setLocation] = useState('New York');

  const handleChange = (e) => {
    setLocation(e.target.value);
  };

  return (
    <div>
      <h2>Map Viewer</h2>
      <input
        type="text"
        value={location}
        onChange={handleChange}
        placeholder="Enter a location"
      />
      <p>Showing map for: <strong>{location}</strong></p>

      {/* Placeholder for map rendering */}
      <div style={{ height: '200px', background: '#eee', marginTop: '10px' }}>
        <p style={{ padding: '10px' }}>Map preview for "{location}" will appear here.</p>
      </div>
    </div>
  );
}

export default Map;

This simple version lets you type in a location and “pretend” to show a map for it. You could even connect this later with real map APIs like Google Maps or Leaflet!

Final Thought

When I first saw the react/jsx-no-undef error in React, it threw me off. But once I realized that my import line wasn’t actually importing the Map component itself, the fix became obvious.

• Problem: JSX was trying to render <Map /> but it was never properly imported.
• Solution: Replace import './Map'; with import Map from './Map'; to correctly import the component.
• Bonus: I added a small interactive feature that lets you input a location and simulates a map view great for prototyping or practicing with state in React.

If you’re building a real mapping interface, this setup gives you a great starting point. Try integrating something like the Google Maps JavaScript API or a React wrapper for Leaflet. But for now, this solves the error and sets the foundation for bigger things.