To Do List Part 1 (React)

Let’s build something this week. Most weeks I have been blogging, revolve around me picking a method or state management pratice and elaberate on it. This time around I thought maybe we take some of what I have gone over in pass blogs, and look at how we can use some of that and implement it in a practical use application, in this came a to do list.

Getting Started

Alright lets do this, to make it easy will build this all in our App.js, but you could always seperate your components into seperate .js files…

npx create react-app my-todo-list
cd my-todo-list
npm start

Now that we got our app created and server running lets get to building…Lets start with setting up our App component with our useState hook holding our tasks so we can then return them later…

import React, { useState } from 'react'
function App() {
const [todos, SetTodos] = useState(
[
  { content: "Get Out Of Bed" },
  { content: "Brew Coffee" },
  { content: "Make Breakfast" }
]) //setting our todos with a key and value to return ...
return (
<div className='App'>
  // this is where we will return our todos
</div> 
 );
}
export default App;

Ok, now lets go ahead and create a way that we can return these todos that we have created…

...
function Todo({ todo }) {
  return (
    <div className='task'>
     {todo.content}
    </div>
 )
}
...

now that we have our Todo function to return our content(in this case our todos) we can set up a way to iterate over these…what better then to use map()! Back in our App we can put the following in the return…

...
return (
<div className="App">
 <div className='todo-list'>
  {todos.map((todo, index) => (
   <Todo
   key={index}
   index={index}
   todo={todo}
   />
  ))}
 </div>
</div>
);
}
....

So whats going on here? well we are using our map method and taking the todo, aswell as the index of that todo to have it be returned out on the screen. We should end up with something like this…

Nice, now we are getting somewhere!! Next blog post we will go ahead and add some functionality like the ability to create and delete tasks.

Happy Coding!