React app failing to display list from objects. Getting this error: TypeError: Cannot read property '0' of undefined

Question

I am doing a React course here and the starter files keep giving me this error:

TypeError: Cannot read property '0' of undefined

From this starter code:

import React from 'react'
import ReactDOM from 'react-dom'

const notes = [
  {
    id: 1,
    content: 'HTML is easy',
    date: '2019-05-30T17:30:31.098Z',
    important: true
  },
  {
    id: 2,
    content: 'Browser can execute only Javascript',
    date: '2019-05-30T18:39:34.091Z',
    important: false
  },
  {
    id: 3,
    content: 'GET and POST are the most important methods of HTTP protocol',
    date: '2019-05-30T19:20:14.298Z',
    important: true
  }
]

const App = (props) => {
  const { notes } = props

  return (
    <div>
      <h1>Notes</h1>
      <ul>
        <li>{notes[0].content}</li>
        <li>{notes[1].content}</li>
        <li>{notes[2].content}</li>
      </ul>
    </div>
  )
}

ReactDOM.render(
  <App notes={notes} />,
  document.getElementById('root')
)

Above code shows:

Attempted import error: './App' does not contain a default export (imported as 'App')

I tried amending by adding export default app and received:

TypeError: Cannot read property '0' of undefined

How can I solve this problem?

Looks like you are expecting notes that's declared outside your component to be the same as the one you are using inside, but can't tell unless you share the code where you are using App — Hamza El Aoutar
– Hamza El Aoutar, Commented Oct 4, 2019 at 1:05
Yes this code is from App. used the create react app boiler plate — DGB
– DGB, Commented Oct 4, 2019 at 1:13
ReactDOM.render( <App notes={notes} />, document.getElementById('root') ) — DGB
– DGB, Commented Oct 4, 2019 at 1:18

ravibagul91 · Accepted Answer · 2019-10-04 01:41:11Z

1

The code from link you are referring is the complete index.js file only.

If you want your code to be modular and want to separate out App component, in that case, you should do this,

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import App from "./App";   //import your component (imported without { }, because App component exported as default)

const notes = [
  {
    id: 1,
    content: 'HTML is easy',
    date: '2019-05-30T17:30:31.098Z',
    important: true
  },
  {
    id: 2,
    content: 'Browser can execute only Javascript',
    date: '2019-05-30T18:39:34.091Z',
    important: false
  },
  {
    id: 3,
    content: 'GET and POST are the most important methods of HTTP protocol',
    date: '2019-05-30T19:20:14.298Z',
    important: true
  }
]

//Pass the props here
render(<App notes={notes}/>, document.getElementById('root'));

App.js

import React from 'react'

const App = (props) => {
  const { notes } = props

  return (
    <div>
      <h1>Notes</h1>
      <ul>
        <li>{notes[0].content}</li>
        <li>{notes[1].content}</li>
        <li>{notes[2].content}</li>
      </ul>
    </div>
  )
}

export default App

Demo

answered Oct 4, 2019 at 1:41

ravibagul91

20.9k6 gold badges40 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JDDoesDev Over a year ago

I would improve upon this by using .map() instead of the multiple list items. That way if you add to the number of items in your notes you don't have to worry about changing the code.

Collectives™ on Stack Overflow

React app failing to display list from objects. Getting this error: TypeError: Cannot read property '0' of undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related