Build a Button That Turns Into a Text Field to Add New Items

[00:00 - 01:47] Component for adding new items. In this lesson we're going to create a component that will allow us to create new lists and new cards. It's gonna contain a button saying add new card or add new list depending on what are we gonna be adding. We'll be able to click on it, set the name of the item, test card and then add it. As you can see it's gonna have two states. Initially it's gonna be a button that says plus and then whatever we are adding. If you click on it the component renders an input field and another button saying create. When you click create it will trigger a callback function that will pass as a prop. Let 's begin with the styles for the button. Openness or see, styles.ts and add a new type for the add item button props. It's gonna have only one prop dark that is gonna be optional and is gonna be a boolean flag. This flag will control if we're rendering the button on the light or the dark background. So here dark is false and here dark is true. Dark means that we're using darker font. Now define an expert the add new item button style component. Expert const add item button equals styled button add item button props. Specify the styles. You can copy them from the code example attached to this lesson. It's important that you provide the add item button props here because otherwise they would be an error in the color field where we are trying to use those props. As you can see we can check the type of this field and TypeScript will calculate it correctly based on the add item button props. Now let's create the add new item component. Here we'll also learn to use state. Create a new file add new item.

[01:48 - 03:01] ts. Define the add new item props. Type add new item. Here we'll have an odd add function that's gonna receive text of type string and it's gonna return nothing . Then we'll have that toggle button text. Toggle button text is gonna be a string and flag dark that will pass to our styled component. It's a boolean flag. Next we define an expert the add new item. Expert const add new item equals a component that will receive props of type add new item props. And I have a typo here that type should be called add new item props of course. Inside of this component we'll need to have a state that will show or hide the form const show form set show form. It's gonna be a state we use the react use state hook and default value will be false. So by default we just show a bottom showing the plus sign and inviting the user to create a new item. Improduce state from react and destructure the props const on add toggle button text dark equals props.

[03:02 - 05:17] Alternatively you could destructure them right in place so you could just write curly braces here and then put all the props inside of them. Now we have all those fields we can check if show form then here we'll render the form otherwise we return the bottom add item. Bottom we pass the toggle button text as a child to the add item bottom we pass the dark prop dark equals dark and on click is a function that will call set show form and it's gonna pass true to it . Alright now we have a simple component that has a state that has a show form state that controls if we're rendering a form or the bottom. When you work with use state hook in TypeScript you might need to provide the type of the state because use state is a generic hook so you can say boolean but with such simple types like boolean we don't really need to do this because TypeScript already correctly derives the type of the state for us because we've passed in the initial value. We'll define the form later right now let's already start using the add new item open aptsx and add this new component below the column add new item pass in the toggle button text it should be plus add another list and on add we pass in a function that will call console log saying item created let's format the document go to the column and add this component there as well add new item toggle bottom text equals plus add another card on add is a function calling console log saying new item added also pass in a boolean flag dark now if you launch your app you're on start you should see this nice little bottom that will use to add new lists and cards