A Beginners Walkthrough to Make a Super Simple To Do List React App

Currently I’m on my last learning module in the coding bootcamp that I’m attending (Flatiron School! Woo!). We started learning React JS about a week ago and things are still a little fuzzy for me, but I’m starting to get the hang of it. The really important step in any learning process is practice, lots and lots of practice, especially if you’re afraid of the practice, just do it. So, for practice I am going to show you a walkthrough on how to make a super simple To Do List using React.

Great advice

To begin we need to create our React file. In your terminal run npx create-react-app react-todo-list and watch it create your app! Then change directories into the folder: cd react-todo-list. From here you can run yarn installor npm install then yarn start or npm start, which will open a window in your browser showing that you’re now running your react app! Yay! I love seeing that default page: “Edit src/App.js and save to reload.” and so we shall.

Before we begin, let’s think about the tree of components we want to have. The parent in this app will of course be App.js and we want the children to be a form component to hold our input field for entering items and a list component to show the list of items. We want our state to be set on our App component, so we’ll make it a class, while the other two will just be showing us some lovely JSX, so we can make them simple stateless functional components (that means they also do not need the ‘this’ keyword). Now, let’s create two new files inside the src folder, I called mine “Form.js” and “List.js”. With our components all set we can start to code!

Hold on a second, we’re forgetting one important step…thinking about how we want our easy peasy To Do List to look! I always like to draw out how I want my app/website to look before creating it, that way it’s much easier to tell what goes where.

This is what it will look like!

That looks about right. A title, an input form, and then a list. Now we can start to code. Note: I always use my to do lists as grocery lists, I hope I’m not alone.

Starting in your App.js file, delete the premade JSX (everything between the two div tags, byebye pretty spinning logo). Delete the `import logo` line too since we won’t be needing that either. Let’s begin by creating a state right under class App extends component {

constructor(){
super()
this.state = {
itemList: [],
}
}

Here we start with an empty item list, but you can have a pre-made list if you like. Let’s add the List component under the return and pass it the itemList state:

render() {
return (
<div className="App">
<h1>To Do List</h1>
<List itemList={this.state.itemList} />
</div>
)
}

Currently the list is empty, so we need to have a conditional statement in our List component for this to show anything.

Switching over to List.js, let’s set it up by adding import React from ‘react’ at the top and making it a functional component using const List = () => (). Remember to pass in props as an argument. Inside the parenthesis let’s make the ternary conditional statement, ‘if the itemList prop is not empty, show the items and a checkbox next to the items, otherwise say that the list is empty:

import React from 'react';
const List = props => (
props.itemList.length > 0 ? props.itemList.map((item, i) => (
<div key={i}>
<input type="checkbox"/>
{item}
</div>
)) :
<h3>List is currently empty!</h3>
)
export default List;

Remember to add ‘key’ to the div to avoid the error: ‘Each child in an array or iterator should have a unique “key” prop’.

Your List component is done! Yay! Let’s move on to making our input form.

I want my input to be above the list, so in App.js under the heading and above the List component add: <Form />. Next, since we are making a form we need to make sure the form is controlled, and since state is in App let’s make a change handler and a submit handler inside App.js to be able to change state. The change handler is going to set the state of ‘item’ (a new state needed to make the form controlled) to the event target’s value (the input box) and will look like:

changeHandler = event => {
this.setState({
item: event.target.value
})
}

The submit handler is where we are going to append the new item onto the current list of items. So we need to make a new array with the old list and the new item, using the spread operator and set the new array as the itemList (also remember preventDefault to keep the page from refreshing):

submitHandler = event => {
event.preventDefault()
let newList = [...this.state.itemList, this.state.item]
this.setState({
itemList: newList,
})
}

We used the spread operator in a new array to prevent directly changing the state.

Great! Your App component is done! Now let’s pass these as props to the form component. Your App.js render section should look like this now:

render() {
return (
<div className="App">
<h1>To Do List</h1>
<Form
changeHandler={this.changeHandler}
submitHandler={this.submitHandler}
/>
<List itemList={this.state.itemList} />
</div>
);
}

Moving to Form.js, import react at the top and let’s make it another functional component and pass in props. To make the form we need div tags to hold it all together, form tags inside them and then our input box and submit button. On the form tag, add the onSubmit event listener and pass in props.submitHandler, this is what let’s the form call the submit handler in our App.js component when the submit button is clicked. In the input tag add in the type, name, placeholder and then pass in props.changeHandler to an onChange event and props.items to the value. It should look like this:

import React from 'react';
const Form = props => {
return(
<div>
<form onSubmit={props.submitHandler}>
<input
type="text"
name="item"
placeholder="What do you need?"
onChange={props.changeHandler}
value={props.item}
/>
<input
type="submit"
value="Submit"
/>
</form>
</div>
)
}
export default Form;

Guess what? You’re done! You made a super simple, easy peasy React App. Check it out on your localhost:3000.

Next step, make it better!

You can!

This practice app was pretty simple, but still tripped me up here and there. I can’t say that currently I’m able to make an app without any problems, but I’ll keep practicing and will one day post a walkthrough on how to make a more difficult app! Let’s do it!