React Crash Course — Just Function Components

Amaury Larancuent

12 min readJul 22, 2021

function component setup, default props, and export:

Notice below how the props property is now an object, and key names are passed in and used independently.

prop types, typing system for props:

Now if you pass in a number, it still renders, but a waring shows up on the console:

To make it a required prop:

Styling

One can use a separate style sheet, or styled components, a popular react library.

In line styling (note the double curly braces):

Using a styling object:

note the single curly braces:

Using a separate CSS file. Once your css code is in the .css file. Here index.css is imported somewhere (find out where, I am guessing index.html file, but check the create-react-app to see how it’s connected to the larger application), and used as default:

Changing the above and moving the button into a separate component:

Creating the component with the props passed in:

And we can now reuse the components as needed:

Adding events to the button as props (you can also create the function in the component, if you wanted to):

Adding onClick to the prop types:

Here in the parent component, we see the function being created and passed on to the Button component’s props:

State

First let’s learn, how to map an array of objects into a component. The array of objects (notice the new component being made here: Task):

Mapping the list of objects in a component (Array class has the map function, check for other array functions like filter, etc):

Adding the new component to the main App component:

Unique key warning:

Solution:

Putting the tasks in state. First import the hook: useState:

Then use useState as so:

We see that useState takes on the default values of the state, and returns the list of objects and a function. The function is used to update the state, as so:

Moving the tasks to the App component, the root component, will allow one to pass it as props to all child components as needed.

npm react-icons, restart the server. Create a separate Task component, pass in the task object as props, and format is as so:

This will give you a button to delete the task. Now to delete the task you must update the state. To do this create a function in the App component and pass it down to the child components. First the App component:

Then the Tasks component:

Finally to the Task component:

“State gets passed down, actions get passed up” huh? I feel both are passed down from parent to child, but whatever, moving on.

Here a mistake was made. We see the event and not the task id in the console:

We see that the deleteTask function takes on one parameter:

This parameter is the event by default, so this adds the event by default:

To change it so that we pass in the task.id we need to create a function that take the task.id as a parameter and pass it to the onClick assignment, as follows:

This arrow function will call onDelete with the desired parameters when the FaTimes is clicked.

Now to actually delete the tasks, we filter by id and call the setTasks function in the App component.

We can also add some boolean fun to handle and empty tasks list:

Now to add the ability to double click on a task and have the border show up as green to indicate it is a reminder. First creating the function and passing it down to props:

Tasks:

and finally, Task:

We added the function to the div component, and we used the onDoubleClick event and passed in the arrow function that calls onToggle with the proper parameter, task.id:

Now to start to set the reminder to it’s opposite when the toggleReminder function is called:

Now we add a boolean expression in the className attribute to toggle the green border:

Next we create an AddTask component with a form, and add the component to the app, just under the <Header /> tag.

We then add component level state

Then we go back down to the form and add the above variables and functions to the various JSX tags. Text/setText:

day/setDay:

reminder/setReminder:

Now add the addTask function that will add it to the application level state object (in the App.js file):

In the App component, add the new function as a prop to the AddTask child component:

Add it to the AddTask component

Create the onSubmit function and link it to the component:

e.PreventDefault() prevents the default behavior of submitting the page. The calls to setText, setDay, and setReminder are to set the inputs back to their defaults. We then ensure the default behavior of the check box (reminder is false by default).

Now we can change the addTask function to do something besides log the object

We would now like to hide/show the AddTask component when we press the green Add button

We start by adding a value to the application state

To the JSX of the App component, do the following (look up the syntax for this ternary operator shorthand):

The button is inside of the Header component, so we add the function to change the value of showAddTask

Then change the Header component:

To change the color of the button, the Header component needs to know what the current value of showAddTask is, so we pass it down using props

Then add the necessary statements in the Header component using the new prop

Build

We’re gonna use npm

This creates a build folder

To test it, we install serve (will need admin permissions):

then run the server, specifying the port

And now it should be visible on localhost:8000

Mock Backend

To create a mock backend we will be using the JSON Server library:

Then we add a new script to the package.json file

We then run the server

This will automatically create the db.json file (or filename specified in the scripts section of the package.json file). We then open a new terminal in VS Studio and run the dev version of our application

Take the data from App.js and transfer it to the db.json, making sure to change the syntax from javaScript to JSON (double quotes around the keys, and all string values. The data below is different, it’s just to give a sense of the structure).

We should now be able to see the data in the browser (this is a basic GET request):

Now we will add the useEffect hook from react, which is used to handle side effects

Then implement the useEffect function

The useEffect function takes on two params, the first is the function to call, the second is a set of dependencies the function needs (look this up, it’s empty here we are not seeing useEffect’s … wait for it … full effect). We can separte out the fetchTasks function

And now the useEffect function, using the setTasks function defined in the useState hook used earlier:

Side note: He gets the following warning

and fixes it by adding the index of the array to the map function. THIS IS SO HACKY, figure out why this produces this error and don’t hack the solution like this ever, please. The solution was in the db.json file, and it was because my guy didn’t have “id” for all the task objects in the tasks list.

Back to the app!

Delete:

This seems too easy, but I believe it’s a function of the JSON Server working in the back to auto delete this. This is cool, if so, and need to check how to do this with a S3 bucket, or a Dynamo DB call. Also notice two calls here, one to delete in the back end the other to filter the data in memory at the front end. Is there a way to get data back from the DELETE call and pass it on to setTasks?? Check, please.

There was a slight error, and here is the fix (adding the await, so it knows to wait for the data to come back from the server):

Update:

We can create a fetchTask that only gets one task, based on its id

So to change the reminder value, we need to fetch the task by its id, change the reminder, then send it back with the new reminder. First getting the task by its id, and updating the reminder and sending it back using a PUT command.

Then get the data back from the PUT (which is the updated task, I guess) and use that object to update the task list in the application state using setTasks