How to Create a React Form Component

[00:00 - 02:46] New item form component. First let's define the styles for the form. Inside of the SRC, style TS, defining new item form container. Expert, const, new item form container, that is a styled div with max width, 300 pixels, display flex, flex direction column , width 100% and align items flex start. That's gonna be our container that will have the input and the bottom. Let's define the styles for the bottom. Expert, const, new item , bottom. It's a styled bottom with green background, three pixels for the border radius. We want to have nice rounded corners. We remove the default border and the box shadow, set the text color to white, add a little padding and align text by the center. And then we also want to style the input. Expert, const, new item input is a styled input where we also round the corners a bit, remove the default border and set a custom box shadow, add a little bit of margin so that we have some space between the input and the bottom, add some padding and set the width to 100. Now let's create the new item form component. Inside of the SRC, create a new file, new item form TSX. Define the new item form props, type new item form props. Here we only want to accept the on add function. Let's define it. It's gonna receive text of type string and return nothing because inside of it we want to perform a side effect. Now define the new item form component. Expert, const, new item form is a function. Here we get the on add from the props of type new item form props. We're gonna use controlled input element so we're gonna store the state for it. Const, text, set, text is use state with default value of empty string. And then we define the layout. Here we combine all the components with that we 've just defined in the styles. New item form container will wrap the new item input and new item bottom saying create. The new item input should have value text from the state and on change we're gonna get the event and store the text from the event target value. Then you item bottom should have on click handler where we call on add with the text. Here we didn't have to provide any type for the event argument of our on change callback because TypeScript derives this type automatically. Here it shows that it's react change event HTML input element.

[02:47 - 03:22] Now let's update the add new item component. Go to add new item and instead of this comment inside of the if show form block return new item form we pass on add that will receive text and then we call on add text and set show form false. Now we can launch our app yarn start and when you click on the add item bottom you should see this form and you should be able to add new items test test create and it should close the form.