DEV Community

Ricardo Maya
Ricardo Maya

Posted on

1

Creating a Job list in React

In my continued learnings on using React, I decided to follow a tutorial on how to make a job list. I am at the point where I know I need to lay off tutorials but, as a novice in React and programming in general, I find myself to be overwhelmed and intimidated when trying to do things on my own. So, when I decide to google "how to start" I end up following the full tutorial.

Anywho! This job list comes complete with a submit and delete button to edit the list of names. It uses the state of the App component, which is just an empty characters array object, to save the input data.

The way to input and save this data comes from the handleSubmit method created in the parent App component. What this method does is add a character to the list of characters once the submit button has been clicked. That gets passed into the Form component as a prop.

Now, in the render method of the Form component, a submit button is added with an onClick prop that calls back to the submitForm method created in the same file that calls back to the _handleSubmit method and passes the Form state through as the character parameter. Afterward, it is reset to its initial state to clear the form after submit.

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay