Basic React App — Pt.II

Hello again, reader! Let’s continue from where we left of in Part I.

We had just set up our state to an empty array for our todo list App and now we want to set it to a variable. Since useState returns an array, we can destructure that array and set it equal to useState. And the first element will be our todos and the second element will be the function that allows us to update our todos. Like so…

const [todos, setTodos] = useState([])

So now let’s test out some default data and call it Todo 1 and Todo 2 in our useState.

Now, lets pass that default data we created for testing on our TodoList html tag with the following line replacing line 8 on my screenshot.

<TodoList todos={todos} />

What is going on in this line of code is its setting a property or prop for short in the tag to equal to that of the todo element in our const and passed in from the useState array.

So in our TodoList.js file, we can add…

{todos}

…to our TodoList function inside its parenthesis. And so that we can see something display about our array in the browser, type in…

{todos.length}

…in between the div tags, like so (below).

So, back in our browser we see this number appear where Hello World used to be. This may vary if you added more objects in your useState array but if you kept to what I’ve coded, your browser should display this…

Now, this not very useful data unless it’s the only data we want about our Todos, we want to print them out and to do that we need a new component.

So, inside the src folder, create a new file called Todo.js. and inside of that file, type

rfc

so that the extension we installed will type out all our boilerplate code and come out like this…

And with this boilerplate code, we can pass in a todo element in our todo component

now, lets not forget to import our Todo inside of the TodoList.js as well by writing…

import Todo from './Todo.js'

…at the top of our TodoList.js file, after the import react line. And now, to loop over our array and print out each todo, we replace our div tags and their children with the following lines, as it is in the image below.

todos.map(todo => {
return <Todo todo={todo} />
})

What this will do is return whatever we set our todo component to output, but the TodoList makes sure it is done for each one of the array items, so we need to code out what is outputted by Todo.js file.

Inside the Todo.js file, let’s get some code into the div tags.

{todo}

The line above suffices, and our Todo.js file now reads like this…

And if we have no typos and did not forget to import, nor export we should see this in our browser.

Nice, but now we have a small problem… we have this error.

It says that each child needs a key property. Now the reason it needs this is so that the array can be updated an only re-render the affected content, not the entire array. To fix this, we will change one line of code in the TodoList.js file.

return <Todo key={todo} todo={todo}/>

By adding the key, we can now re-render updated content without re-rendering the entire array every time. And now that key error we saw should have disappeared after the code completed compiling.

So, now we must adapt our array data to work with the key attribute using an id as well as a string for the browser to print as the name, which at the time it does not have. To rectify that, let’s go to our App.js file and update our array to this (line 5)…

And let’s update our TodoList.js and Todo.js files to call on these new created attributes of our one array object.

Now, if we add a new object, only that object will be added to the render rather than the entirety of the array re-rendering along with the change, same goes for the deletion of an object. Since the id attribute is unique to each object, we won’t delete the wrong objects as well. And for now, we should see the following rendered in-browser.

The browser is now rendering the attribute, name, for each object in the array, of which we only have one and it’s Todo 1.

That is it for now, stay tuned for Part III of this React App tutorial.

See you soon!