Lost on a react to-do list app

So I have been having a bit of difficulty handling react. I have tried to do a simple to-do list app on codepen, but unfortunately I can’t get it to work properly. I can’t find out how to show the items array, all that is seen is an empty ordered list with “submit” in there for some reason . There is also two bullets for every click of the submit button, which there should only be one. The console.log also shows that the app also won’t save the list items on the first click of the submit button(which I tried to program it to do). Here is a link to the project

Thanks. Here is the javascript if you just want to see that

var newItem;

class Box extends React.Component {
        constructor(props) {
        super(props);
        this.state = {
          value: '',
          items: []
        };

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }

        handleChange(event) {
          this.setState({value: event.target.value});
        }

        handleSubmit(event) {
          this.setState({
            items: this.state.items.concat([this.state.value]),

          })
          var newItem = {
            text: this._inputElement.value,
            key: Date.now()
          };
         console.log(this.state.items)
         event.preventDefault();


        this.setState((prevState) => {
          return { 
            items: prevState.items.concat(newItem) 
          };
        });

        this._inputElement.value = "";

    
  }

  render() {
    return (
      <div className="box">
      <form onSubmit={this.handleSubmit}>
        <h2 className="display-2">To-do List App</h2>
          <input type="text" value={this.state.value} onChange={this.handleChange} size="50" />
        <input type="submit" value="Submit" className="btn btn-primary" ref={(a) => this._inputElement = a} />
      </form>
      <div>
        <TodoItems entries={this.state.items}/>

        </div>

        </div>
    );
  }
}

class TodoItems extends React.Component {
       createTasks(item) {
          return <li key={item.key}>{item.text}</li>
      }

      render() {
         var todoEntries = this.props.entries;
          var listItems = todoEntries.map(this.createTasks);

      return (
          <ul className="theList">
              {listItems}
          </ul>
    );
  }
};




ReactDOM.render(<Box />, document.getElementById('app'));

Hi dannyhz,

I noticed that in your createTasks method of TodoItems component you’re referring to item.key and item.text properties when item is a simple string (not an object having those properties,

so instead of

return <li key={item.key}>{item.text}</li>

do this,

return <li key={item}>{item}</li>

I tried as you said @Aconite but it the screen just goes blank and I get this error “Error: Objects are not valid as a React child (found: object with keys {text, key}). If you meant to render a collection of children, use an array instead.
in li (created by TodoItems)
in ul (created by TodoItems)
in TodoItems (created by Box)
in div (created by Box)
in div (created by Box)
in Box”

i forked your codepen and got it working

react takes a little while to figure out.

keep at it. i did make a a few tutorials on react, one of them is also using redux and apollo to make todo app. honestly that one might be too much.
check out the drum machine here - drum machine… that one might help give you a sense of react in a codepen environment. good luck.

1 Like

@dannyhz, that problem is with your handleSubmit method, you’re concating both the string value of the text and an object, you can use either one,

comment out the second call to setState and newItem declaration and use the li as in my prev answer

or comment out the first call to setState and use the lis as you were, though with that, I’d recommend avoiding Date.now() or other random functions to keep your functions pure, you can read more about pure functions and why they’re useful at the React docs.

Hope this helps.

1 Like

@benjaminadk
Thanks, your codepen definitely made a reasonable bit of changes to the code, it gave me more insight into what I could have done. I’ll definitely keep going at react, i’ll get the hang of it eventually. I’ll also check out your tutorial when I get up, it is late so I will get some rest tomorrow. .

@Aconite That did it! Thanks! I was going to add a remove button next, I hope I don’t run into substantial problems again lol

1 Like

Glad to hear that.

Besides, getting stuck is an important part of learning.

1 Like