CODEWITHSUNDEEP
javascriptreactjs
traveler316
traveler316

Reputation: 107

Why Does My React App Keep Failing To Compile?

I'm learning react and building a simple straightforward to do list app. However, it keeps throwing this error: 

./src/App.js
  Line 9:35:  'Todo' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.

I'm not sure why this error keeps throwing. I have defined my my ToDo js file - I believe I correctly exported it and then correctly imported in the App js file. Am I missing something?

App.Js File:

import React from 'react';
import logo from './logo.svg';
import './App.css';
import ToDo from './ToDo.js'
import DoData from './DoData.js'

function App() {

  const val = DoData.map(item => <Todo key = {item.id} item = {item}/>)


  return (
   {val}
  );
}

export default App;

ToDo.js file:

import React from 'react'

function Todo(props){
    return(
        <div className = "todo-item">
            <input type ="checkbox" checked = {props.things.completed}></input>
    <p>{props.things.description}</p>
        </div>
    )
}

export default Todo

DoData.js:

let DoData = [
    {
        id: 1,
        description: "go for a walk",
        completed: true
    },
    {
        id: 2,
        description: "babysitting",
        completed: true 
    },
    {
        id: 3,
        description: "watch MadMen",
        completed: false 
    },
    {
        id: 4,
        description: "See the mailman",
        completed: true 
    },
    {
        id: 5,
        description: "Say hello to the world",
        completed: false 
    }
]

export default DoData.js

Upvotes: 1

Views: 372

Answers (2)

ksav
ksav

Reputation: 20821

In JavaScript, identifiers are case-sensitive

Check the case of the identifier in your import statement in the file ./App.Js vs the use of it:

import ToDo from './ToDo.js'
<Todo ... />

Notice the difference in casing between Todo & ToDo. You have 2 options to fix this linting error.

Either change your import to: 

import Todo from './ToDo.js'

or

change your use to:

`<ToDo ... />`

Note: Also, double check your export statement in the file ./DoData.js.
While the identifier DoData definitely exists, it has no property called js, and so DoData.js will be undefined.

Upvotes: 1

Tps
Tps

Reputation: 194

Option 1

Update
import ToDo from './ToDo.js'
to
import Todo from './ToDo.js'

as you are using <Todo key = {item.id} item = {item}/> in your app

Option 2

Update
<Todo key = {item.id} item = {item}/>
to
<ToDo key = {item.id} item = {item}/>

as you are importing component as ToDo
import ToDo from './ToDo.js'

As you are exporting ToDo as default in ToDo.js file, you can use it as any name as you want in your imports anywhere in your app. But make sure when you render the component, it matches the import name at top.

Upvotes: 1

Related Questions