Part 5 — Create Lifts Through Parent-Child Communication

Displaying a form in a React component, handling the submission and posting to the database.

Beginner Rails 5 With ReactJS Tutorial

Part 4 — Part 6
Video Tutorial — Source Code

Recap

If you visit the index#lifts route, the app currently displays all the Lifts in our database in our Lifts component. In this episode, we will build a form that will allow the user to submit a new Lift to the database.

Step 1 — Add Create Method To Lifts Controller

If you visit the index#lifts route, the app currently displays all the Lifts in our database in our Lifts component. To be able to create a new Lift, we need to define the create method inside the LiftsController. Use strong params to whitelist data:

#app/controllers/lifts_controller.rb

Add the create method, and use strong params.

Step 2 — Build A React Component To Create A Lift

Rails normally makes an http request to make a post to the database when an HTML form is submitted. Before we get that far, we need to create a React component to display the form. Create a new file under javascripts/components called ‘lift_form.js.coffee’. Remember that we will be using Bootstrap inline form styles!

#app/assets/javascripts/components/lift_form.js.coffee

The value attribute is set to the value contained in the component’s state. The onChange attribute is set to trigger a function called handleValueChange. Every time a keystroke is detected in the input field, the handleValueChange function will be run. When we build this function, it will detect the input that was triggered, and update it’s values.

The setState function will update the component’s state and triggers a UI refresh using the component’s new state.

On the submit button, we disabled a function called ‘valid’. Now we will create that method, and have it check the input data.

We’ve already set onSubmit to run a function called handleSubmit, but we haven’t created it yet. This function needs to prevent the default action, which would be so submit the form using http request. When the submission is successful, the form should reset it’s values.

Step 3 — Update Lifts By Communicating Between Components

All that’s left to do, is render the Lift form so we can actually use it. It will be rendered on the Lifts component, and they will have a parent-child relationship. When the form is submitted, the handleSubmit function sends the post data inside the variable called ‘data’ to the prop inside the parent component called handleNewLift.

We will add a new function called addLift that takes the new Lift data into a variable called ‘lift’. Notice how we call the lifts out of the component’s state, push the new lift into the array, then use setState to redefine the lifts. The UI will immediately update if this function is successful.

We also need to use the React.createElement function to render LiftForm in the component, where we can define the handleNewLift prop.

Conclusion

Run a server and visit localhost:3000/lifts and make a submission with the form:

Next Episode:

Updating UI With Calculated 1RM