To Do App - 1st Project with React, Please Critique

Code Feedback
1

Hello everyone,

I’ve finished my first project using React, a little to-do app. I started by following a tutorial but then added some more features to it: a reset button and the ability to strike through the items on the list.

I would really appreciate someone to look at my React code and make sure I’m doing everything correctly since I don’t really know what I’m doing!

For one thing, I have a stateful class component (ToDoApp) with a child that’s a stateless functional component (List) which in turn has a child that’s a stateful class component (ListItem). Is this okay to do?

Thanks in advance! :slight_smile:

https://codepen.io/stressstressstress/pen/MWWYOQL

1 Like
2

Hello @stressstressstress,

Good job!

Yes, you can nest stateless and stateful components. This is absolutely okay.

Here you will find a comments: https://codepen.io/sherbakov/pen/PooqBNN

1 Like
3

@sherbakov1 Great comments!! Thank you so so much. :smiley: Very helpful.

The article you included about why not to use index as a key made sense, thanks.

Can you confirm one thing for me? I didn’t have to bind the handleInput(event) function (and other functions) to this because I passed a function like this: <input onChange={(event) => this.handleInput(event)} />, right?

If instead I wrote <input onChange={this.handleInput} /> I would have had to bind it? Is there any advantage to either approach?

Thanks again!

4

@stressstressstress both options work the same way, but you can go further and use Class Fields :slight_smile: Read this article: https://blog.g2i.co/react-class-components-with-es6-and-class-fields-927b2b59f94e

1 Like