useState(), Dropdown component, React children

I think it is important to note down everything I learned today. As I am doing different things in my head regarding everything that I have learned and used till now are becoming more crystal. So I guess I understand the following things now:

1. useState()
   This is an important concept especially if you are making your components in functional form, this is what is called a hook in react. It provides you the functionality to use states in react. I now understand how this is used with change and click events to toggle states and combined with ternary conditions this can be a powerful method to switch elements inside your page without actually switching components i.e, you do not have to dismount your current component and mount another component, I used this very well in the react-firebase phone authentication system that I implemented recently. What I did was declare an isOtpSent state and when the response for the signInWithProvider method was successful, I toggled the state. And then I used that boolean with ternary operators to decide what text to show. When isOtpSent was false, the text shown on the button was “send OTP”, when it became true, the text changed to “verify”.
2. Arguments in storybook
   I’ll show what I learned here, first let me show you what the problem was. Storybook is a new thing to me and I was struggling with new syntax and stuff. Storybook actually has a specific format of writing called the CSF. The component I was working on is a dropdown, it is supposed to be a fairly simple component but the challenge came when i had to pass the handleChange function from storybook, the code for the stories file looked like this

First, i was trying to pass the handle change from inside Type1.args but that obviously didn’t work because it was dynamic and I also had to change the value attribute to dynamic, so I thought about the spread operator over in the Template constant declaration. It is a function or a “Named Export” to be precise. Then I added the handleChange as an attribute and the dynamic value as an attribute, and then I declared the handleChange function above the return statement. The code now looked like this and worked perfectly

Also, the code for the main dropdown file is this:

React dropdown

3. React children:
Have been doing this error for a while now. The correct way to pass the children for react components is like this:

<SomeComponent>{Children}</SomeComponent>

Not like this:

<SomeComponent children=”literally anything”></SomeComponent>

— — — — — — — — — — — — — -End — — — — — — — — — — — — — — -