Adding 'About' to the Front End - React

In the last post I added a new data field, the 'about' section to our 'groups' database. Now, I want to update the client so that the user can add or edit the 'about' section for each group.

Destructring, and then adding the <p> element.

I've decided that I want the 'about' info to appear between the title of the group, and the info about where and when the group is meeting. I open up the Group component and add the 'about' property to where I'm de-structuring this.state.group inside the render method (first highlight). Since I'm setting the initial state from the props, and the entire group object is sent through props, the 'about' data is already getting sent along with the entire 'group' object, so I don’t need to make any updates to my constructor function at this point.

Now that I have access to the 'about' info, I need it to actually render on the screen, so I add a simple <p> element (second highlight) and use JavaScript to access the 'about data. I take a look at the client now and sure enough, the 'about' data now appears between the title and the location information. Since I've confirmed that the data is available and viewable, I commit the changes.

Next I want to add the 'about' data to the Edit Group screen so that when a user wants to edit a part of the group, they can edit the 'about' section as well. I move to the EditGroup component and follow steps similar to before. I add 'about' where I'm de-structuring this.state.group and since I'm adding an input, I add a new input and set the value to 'about'. I also add an About header. I do not add required=true to this input since it's not required by the database, so if the user doesn't want or need to add additional data, they won't have to. I can also use the same handleChange function that I use in the other inputs since I wrote the handleChange function to be used with any property within the this.state.group object.

The Edit Group screen with the textarea for entering the 'about' data.

I take a look at the new input in the UI and realize that it looks awkward since the 'about' data will likely be much longer than a standard input field. I do a quick search through the React form documentation and learn that there is also the option for textarea element in place of an input element. I try out the textarea instead of the input element and now I've got what I'm looking for. I’ll adjust the layout and sizing later on, but for now this will work just fine.

I want to test out my update, so I check the React dev tools in the browser and confirm that, when I make any changes in the textarea, the state of the component updates. I also try submitting the form after making changes to the 'about' area and confirm that the form is working correctly. I commit the updates.

The final feature for this update is to add the 'about' field when you are creating a new group. I open up the AddGroup component and know right away that I need to make a change to the constructor function. More specifically, I need to add a property for 'about' in this.state.group. Since this form starts blank, the value of 'about' will be an empty string.

As for the rest of the component update, the change is very similar to the change I had to make in EditGroup. I add 'about' to this.state.group de-structuring, and then add a new textarea between the sport title and the location information. Again, I do not make the textarea required since it is not required by the database. I can also use the same handleChange function for the same reason I could in the EditGroup component, it is not specific to any one property.

Adding 'about' to the state of the AddGroup component.

Last, I test the update by creating a new group for going fishing, being sure to fill out something in the new textarea. Sure enough, the submit is successful and when I pull up the new group for fishing, I can see the 'about' data that I entered into the form! Satisfied with my progress, I commit the updates.