I am having trouble using node.js to open my react.js project code

Tell us what’s happening:
I am opening cd new App in Node.Js. Then typing in npm start. I keep getting errors when I try to open it in the browser. Please help me figure this out. The file I am using for my index.js is this:

class MyToDoList extends React

import React from "react";

import ReactDOM from "react-dom";

import "./index.css"

import TodoList from "./TodoList"

import "./TodoList.css";

var destination = document.querySelector(#container");

ReactDOM.render(

    <div>

        <p>Hello!</p>

    </div>

)
This is the file I am trying to open:
import React, {Component } from "react";

class TodoList extends Component {

  constructor(props) {

    super(props);

 

    this.state = {

      items: []

    };

  }

  this.addItem = this.addItem.bind(this);

}

  addItem(e) {

//populating our addItem method. To ensure the value we enter somehow makes its way into React understanding our todolist

//if there is a value here and the item is called, we need to write some code to deal with that.

if (this._inputElement.value !=="") {

  var newItem = {

    text: this._inputElement.value,

    //a number indicating a time, better than math.random() to ensure multiple tasks dont have the same one 

    key: Date.now()

   

    //the next step is to set out Items Array. PrevState gives the value just at this moment. PrevState is asking it to copy the values. With concat, its returning a whole new array instaed of modifying an existing one to avoid mutation.

this.setState((prevState) =>

  return {

    items: prevState.items.concat(newItem) 

  };

});

}

this._inputElement.value="";

console.log(this.state.items);

};

e.preventDefault();

}

  render() {//the only complication here is actually reading the value from the DOM element. As you know, React puts up a gate between us and the DOM. It doesn't like when we access DOM elements and fiddle with properties on them, but the loophole is using refs.

    return (

      <div className="todoListMain">

        <div className="header">

          <form onSubmit={this.addItem}>

            <input ref={(a) => this._inputElement = a} 

            placeholder="enter task">

            </input>

            <button type="submit">add</button>

          </form>

        </div>

        <TodoItems entries={this.state.items}/>

        <TodoItems entries={this.state.items}/>

      </div>

    );

  }

  }

export default TodoList;

Your code so far

What errors are you seeing in the browser?

./src/index.js
  Line 8:10:  'CATAPI_basics' is not defined  react/jsx-no-undef

Search for the keywords to learn more about each error.

You have several issues here and maybe more that I can not see. Can you post a link to your complete project code? That way, I can help identify all the issues?

1 Like