React Hooks: setState
Over this past week at Operation Spark, we worked on our legacy project sprint. My team and I were handed a different groups project and tasked with making improvements to their app by adding our own new features. The team before us decided to use ReactJS for their front-end. I was pretty excited about this because I had just started getting into react hooks and was eager to test out my newly acquired knowledge.
After some brainstorming and idea presentations, I decided to tackle the task of sending potential new users text message invites from existing users. I wanted to do this by making a form in the app where users could enter their friends phone numbers themselves. I would then pull the phone number from the form input data, and the name of the currently logged in user to send an Axios request to my server. My server request would then use Twilio’s SMS messaging service to send that message to the invitee as a text message with a link.
Get matthritz’s stories in your inbox
Join Medium for free to get updates from this writer.
But first things first. I wanted to set up my input form in the react component for the users homepage. Before Hooks, I would have to set up a state to hold my user’s name, and the input number. Then I would have to set up a function that would set the state of the user’s name to whatever user was logged into that page and also set the state of the phone number to the phone number in the input form. I would then use the submit button for the input form to call that setState before sending the Axios request with that information to my server. my component would probably look something like this.
Upon learning how to use react hooks, I now know a few shortcuts that I can take to make my code look more readable and save some space. The first thing I did was import React’s useState. The useState feature with React Hooks allows you to set a variable and a function call to manipulate that variable in place of where the state would usually reside.
You can see that the component is not set up as a regular react component but instead of constant. the constant holds our props which have been deconstructed in this case. Under our props you can see that we set a constant variable with brackets around our new message state. Next to the message state I set up the set message function which will update the values in my message variable. we set this new Hook with the values that we want to change in the useState. In this example I am using to to be phone to be my input form’s phone number, and name to be the current user’s name. The current users name is already available to me in my props so when I use my setState I can just make a reference to it. My phone number will be acquired when the user enters it into the input by utilizing onChange and using my setMessage Hook to pull info from the form and update my state.
As you can see, the onChange is using the setMessage hook to reference the state and make the change to the message variable. Once you learn React Hooks, you will find that your code looks much cleaner, and easier to follow. Next time I will go into useEffect, which is another part of React Hooks that monitors for specific changes in the state and re-renders the page accordingly.
