Starting a new project

First, we create four different components, import them into App.jsx and add some basic stylings, and now it looks like this 👇👇. Different colors indicate the different components created.

Basically, the App.jsx looks like this, with the Logo as the first component, the Form as the second, PackingList as the third, and the Stats as the last. 👇👇

Rendering some list items

Now, let's render some dummy lists we created to display for now before we add the form to enable us to do that. Here, I created an array of two objects called initialItems, and we want to use it in the PackingList component. We have to pass it as props so initialItemscan be accessible in the PackingList component. 👇👇👇

In the PackingList component, we destructure the props and use the map method on the initialItems array.👇

Let's further simplify the packing list by creating a component for the list. Here, we send the item object as an item prop to the new Item component like so👇👇

Result

Add some styles

Now, remember in the initialItems array, each object has a packed property which is either true or false. Let's add some CSS class to add dynamic style if the packed value is true. To test this out, we change one of the packed properties to true in our array and now conditionally render a style. At line 17👇👇

Since the packed value is true for the second list, the style applies.

Building a form and handling submission.

When we build a form in React, we use the <form> HTML element. Now, let's build our form and add an input, a select element, and a button, and add some styles.

So now we want to add some kind of event listener that listens for a submit event. For this, we create a function called handleSubmit and inside this, disable the default behavior of page refresh in HTML. Now, add the onSubmit event listener to the form.👇👇

Part 2 : Controlled elements

Sure thing! We will discuss controlled elements in detail tomorrow. 💪🙋‍♀️🙋‍♀️