BRIAN YU: OK, welcome back everyone to CS50 Beyond.

We continue where we left off this morning.

This morning we introduced React, a JavaScript-based framework

to allow us to quickly and easily build user

interfaces via declarative programming, describing

what it is that we want the page to look like in terms

of various different components.

Then putting those components together to be

able to create an application that's interactive.

In order to update the application, we didn't

need to do what we did before in the world of imperative

programming of saying, go to this part of the page

and insert certain components or other HTML elements

inside this section of the page.

We would just update our data, update the state of our components

in order to say this value of the state should take on this new value.

And React would take care of the process of updating the user

interface to reflect whatever it is was contained inside of our state.

So we're going to pick up where we left off,

continuing in with the morning project.

So there are a number of different ways to solve

the problem in this morning's project.

I'll show you a couple of them now just to give you

a sense for the different approaches, the way

that you can use React to implement some of these features.

And then I'll introduce what the afternoon project will be.

And the main focus of the afternoon lecture

is just going to be thinking in React, thinking

about what components we need, what state we need,

how we might set up an application.

And then we'll actually go ahead and try and implement the afternoon project.

So let's go ahead and get started with the to-do list application, where

we left it off this morning.

So as of earlier this morning, we had a to-do list application

that had a list of tasks, whereby I could type in a task, task one,

and I click Add task.

And that allows Add tasks to show up in this list.

But of course, task one is still listed here in the input field.

How do I get rid of task one from the input field?

Going back to this morning, how would I remove task one from the input field

when I click Add task, clearing out that field?

Which function needs the change?

Yeah?

AUDIENCE: Send the value of input to empty string.

BRIAN YU: Good, set the value of input to empty string.

And where should I do that, in which function?

AUDIENCE: In add task?

BRIAN YU: Great, in add task.

So when I add a new task, I want to do two things.

In addition to taking my tasks array and updating it, filling it

in with the new thing, I also want to say, all right

whatever the value of the input field was before, just

go ahead and set that equal to the empty string, because I

want to clear out the input field as soon as I click the Add task button.

So I'll go ahead and refresh this, try this out.

I type in task one, click Add task.

And all right, great, the task shows up and this field clears itself out.

The other thing that we ask you to do this morning

was show a count of how many tasks are currently in the task list.

And someone else tell me how you did that.

What did you change and what code did you have to write?

I know many of you did this.

So how did you do it?

Show how many tasks I currently have.

Yeah?

AUDIENCE: Use .length.

BRIAN YU: Yeah, if you have an array in JavaScript, and you use .length,

you can get at the length of the array, the number of elements in the array.

And so if I wanted to display the number of tasks that I currently have,

I could just say number of tasks.

And then using curly braces, again, to mean plug-in some JavaScript value

here, where are my tasks stored?

What would I type?

In the state?

OK, this .state.tasks.

And then .length to get at, OK, here is the number of tasks that I actually

have as of this moment inside of my application state.

So I refresh that.

And now I see, OK, tasks, number of tasks is zero.

But as soon as I add a first task here and click Add task,

multiple things happen.

The list updates.

We also see that this clears out and number of tasks

updates to reflect the length of that array.

Questions about any of that?

All right, so the challenging piece of this, of the morning project

was really the deletion of tasks.

How do you take a task in this list of tasks

and delete it so we no longer have it?

And so let's take a look at how we implemented that.

We'll scroll up to the top.

For every list item, when we map over all of our tasks, right now

we just have a list item that lists the name of the task just like this.

If I wanted to do more than that, well, I could just add to this list item.

In addition to just having a task, I'll also have a button, for example.

And that button we'll just call delete.

And let's leave it at that for now, just putting a button there.

Right now the button doesn't do anything.

But let's at least see it so we can visually

see what that button looks like on the to-do page.

We'll refresh the page.

OK, number of tasks is zero.

And I could say, OK, task one for example, add the task there.

And all right, great, we see the Delete button.

We also see task 1 show up next to it.

They're a little bit close together.

So you might try and modify some of the spacing of things,

the margin around the button, for instance,

in order to give yourself more space if you wanted to.

But of course right now, even if I have multiple tasks, I can click Delete

and the delete buttons aren't doing anything just yet.

So how do we actually delete a task?

Well, we probably want some function that's

going to take care of deleting a task.

And so one way to do this might be to say, all right, delete task.

And I saw people approach this in a couple different ways.

So I'll show you both ways that you could

have tried to approach this problem.

One way would have been to say, all right, delete task.

Well, this is a function that's going to take

some argument, some like index for which task

it is that I actually want to delete.

And the logic there would be, well, all right,

when I click on the button, button on-click.

Let me go ahead and delete that specific task corresponding

to index I, which is the index I'm currently on.

So you might have tried to write something like this .deletetask.

And then in parentheses, you might have thought all right,

let me put in the variable I there.

Now, this doesn't quite work.

Does anyone know why this doesn't quite work?

It's a little bit subtle.

Yeah?

Exactly.

Exactly.

This on-click attribute should take as its argument a function.

And the idea is that that function will not

be called upon until we actually click on the button.

But right now what we're passing into on-click

is the result of calling a function.

The fact that you see parentheses after this function

means that we're actually calling the delete task function, which

is not what we want to do.

What we want to do is we want to pass the function

into the on-click attribute, but not actually call

the function until we click on it.

So a couple ways to potentially handle that, the simplest way might

have been just to wrap this whole thing inside of a function, where, oops,

undo that.

What did I just do?

Delete task takes an index.

I think I accidentally deleted that.

And instead of saying on-click equals this .deletetaskI.

We can wrap this entire thing in a function

as simply as adding an extra set of parentheses and an arrow.

Remember, that arrow syntax creates a function.

And so we've created a function that doesn't take any arguments,

but that when it's run, will actually perform the deletion of the task.

So this is one way to do things.

And so now what exactly does the delete task function need to do?

Well, it needs to remove the task at this particular index.

So I'm going to say this .setstate.

And the new state is going to be a function of the old state.

I'm going to take the old state, modify it by removing the task,

and then returning the new state.

So this is going to be a function that takes the old state.

And then what do we need to do?

Well, the first thing we need to do is get a copy of that list of tasks.

Because I can't modify the state itself, as we mentioned before,

you should never modify the state directly and react.

So I'm going to create a variable called Tasks.

And that's just going to be equal to this .state.tasks filled into a brand

new array.

So I create a copy of that list, save it inside of a variable called tasks.

And then I want to remove whatever is at index I.

And so as we've decided this morning, the way we would do

that is by saying tasks.spliceindex1.

In other words, saying remove whatever is at index--index.

And how many things should I remove?

1.

Now, the return value of splice is going to be the array that was removed,

that was spliced out of the tasks array.

But tasks itself, as a variable, is going

to be the original array with whatever we wanted to remove removed.

So there's a slight nuance there that I saw a couple people

struggle with a little bit.

Just know that what splice of returns is different than what

the actual value of the tasks variable is.

And now that I've spliced out whatever was an index,

I can now use this variable tasks to be the new list that has the thing

index--index removed from it.

And so this is a function.

So the last thing I need to do now is return something.

And I'm going to return, all right, what should the new tasks be?

It should be just this variable called tasks.

And so this is a slightly more complicated set state function.

In particular, it's more complicated because it's

really more of a full fledged function where

I'm defining variables, and manipulating those variables,

and returning some value.

Their add task meanwhile, was a much simpler function,

whereby I could just say I didn't need to create any new variables.

All I needed to do was say we start with this state

and we're just going to immediately return

this object that represents the changes that we're going to make to the state.

And so I'd just take a look at Add task and Delete task,

and see if you can get an understanding for the differences between the two.

All we need to do in Add task is add to this tasks array.

But in Delete task, we really need a little bit of extra logic

to copy the array, remove something from the array,

and then return what the new object should be.

Questions about anything so far?

This was one way to implement things from this morning.

Yeah?

AUDIENCE: [INAUDIBLE]

BRIAN YU: If you're getting an error about-- so

I would first check to make sure that your curly braces in parentheses

match the curly braces in parentheses that I have here.

You might be using the keyword in a place in your code

that you're not allowed to use it.

But if you're still getting that error after that,

it's probably some syntax thing that we can

take a look during the project time.