Hello I am following a tutorial on learning React and right out of the gate am getting a undefined reference error. I am calling all the dependent libraries locally so I don't think it is a problem with hte libraries not fully loading. I am a newbie to React so I'm not sure what the issue is

I tried renaming the variables and looked through all the similar issues with reference errors posted here

<div id="entry-point"></div>

<script src="lib/react.js"></script>
<script src="lib/react-dom.js"></script>
<script src="lib/babel.js"></script>    

<script>
 console.log('notes')       
        let notes = [
          { id: 1, content: "Learn React" },
          { id: 2, content: "Get Lunch" },
          { id: 3, content: "Learn React Native" }
        ]

        class Note extends React.Component {
          render() {
            return React.createElement("li", {}, this.props.content)
          }
        }

        class NotesList extends React.Component {
          renderNote(note) {
            return React.createElement(Note, { key: note.id, content: note.content })
          }
          render() {
            let { notes } = this.props

            return React.createElement("ul", {}, notes.map(this.renderNote, this))
          }
        }

        class App extends React.Component {
          render() {
            let { notes } = notes

            return React.createElement(
              "section",
              {},
              React.createElement("h1", {}, "You have ", notes.length, " notes"),
              React.createElement(NotesList, { notes: notes })
            )
          }
        }

        ReactDOM.render(
          React.createElement(App, { notes: notes }),
          document.getElementById("entry-point")
        )
</script>

This is the error message I'm getting:

ReferenceError: Cannot access 'notes' before initialization
    at App.render (scratch.html:47)
    at h (react-dom.js:130)
    at beginWork (react-dom.js:134)
    at d (react-dom.js:158)
    at f (react-dom.js:159)
    at g (react-dom.js:159)
    at t (react-dom.js:167)
    at x (react-dom.js:166)
    at r (react-dom.js:164)
    at v (react-dom.js:163)

Hello I am following a tutorial on learning React and right out of the gate am getting a undefined reference error. I am calling all the dependent libraries locally so I don't think it is a problem with hte libraries not fully loading. I am a newbie to React so I'm not sure what the issue is

I tried renaming the variables and looked through all the similar issues with reference errors posted here

<div id="entry-point"></div>

<script src="lib/react.js"></script>
<script src="lib/react-dom.js"></script>
<script src="lib/babel.js"></script>    

<script>
 console.log('notes')       
        let notes = [
          { id: 1, content: "Learn React" },
          { id: 2, content: "Get Lunch" },
          { id: 3, content: "Learn React Native" }
        ]

        class Note extends React.Component {
          render() {
            return React.createElement("li", {}, this.props.content)
          }
        }

        class NotesList extends React.Component {
          renderNote(note) {
            return React.createElement(Note, { key: note.id, content: note.content })
          }
          render() {
            let { notes } = this.props

            return React.createElement("ul", {}, notes.map(this.renderNote, this))
          }
        }

        class App extends React.Component {
          render() {
            let { notes } = notes

            return React.createElement(
              "section",
              {},
              React.createElement("h1", {}, "You have ", notes.length, " notes"),
              React.createElement(NotesList, { notes: notes })
            )
          }
        }

        ReactDOM.render(
          React.createElement(App, { notes: notes }),
          document.getElementById("entry-point")
        )
</script>

This is the error message I'm getting:

ReferenceError: Cannot access 'notes' before initialization
    at App.render (scratch.html:47)
    at h (react-dom.js:130)
    at beginWork (react-dom.js:134)
    at d (react-dom.js:158)
    at f (react-dom.js:159)
    at g (react-dom.js:159)
    at t (react-dom.js:167)
    at x (react-dom.js:166)
    at r (react-dom.js:164)
    at v (react-dom.js:163)

• javascript
• reactjs

Share Improve this question Follow edited Sep 16, 2019 at 20:09 Emile Bergeron 17.4k55 gold badges8585 silver badges132132 bronze badges asked Sep 16, 2019 at 19:45 Terrence WrightTerrence Wright 4311 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

ReferenceError: Cannot access 'notes' before initialization at App.render (scratch.html:47)

So your piler is telling you where your problem is, in this case line 47 inside your render function.

Then it is telling you that it cannot access before initialization. You are attempting to destructure with this syntax:

    let { notes } = notes

This is essentially saying "let notes = notes.notes;" Since notes is an array and doesn't have a property called notes - you are receiving an error. You already have notes defined in the scope, so try deleting that line and seeing what happens.