How to add any record to the database for React?

Suppose we got a successful response with HTTP status 200 okay all right guys we have successfully stored a recording to a database let’s go ahead and let’s verify open my secret workbench and just execute select query on employees table so look at here a new record is successfully inserted into a database all right now what we’ll do we’ll add one more record lets your post name as Amir and last name as khan and email as Amir here at and hit send button so look at where we got a response.

Let’s verify a record in a database table here we go so look at here record is added to the database it’s pretty simple all right great we have successfully created add employee rest API looks at here this is the page that we are going to design in next video in this video we will just create a component and we add a route to the component and we add a new button to the employee’s list page once we click on add employee button then we should be able to navigate to this page all right in next video we’ll see how to design this item 5 form and in further videos, we will see how to submit the item employee form uh to the rest API so we make an SDP call we send the form data to the rest API and rest API internally store a form data in a MySQL database.

Let’s go to the components’ folder within a components’ folder let’s create a new file called create m5 component dot j6 all right guys we have created a new file within a file let’s go ahead and let’s create a component let’s use React snippets to quickly create a React component I am going to use RCC react snippet command this will create a React class component hit enter so look at here all right now what we’ll do we’ll configure routing for this component go to the apps’ app.js file and look at here in the previous video we have configured a router.

Now let’s create one more route for create employee component let me quickly copy this route and paste it here and whenever we hit the URL like localhost colon 3000 slashes add m5 then add employee component will get rendered for example let’s say add employee, so this is our path and whenever we hit this part in a browser we are going to render create employee component all right got if it’s pretty simple right let me delete this list com list employee component element this is not required because we have already configured routes delete this and save the file we will add a button over here that adds employ button and once we click on add employee button that should navigate to the kt employee component let’s go back to the VS Code ID and let’s add a button over here.

Let’s go to the list employee component and here let’s create a button let’s create a new class name and then just your bootstrap CSS class name that is row insider this do just create a button look at here I just added an add employee button here can see some of them you know bootstrap CSS classes for the button and this is the event handler so whenever I click on this button this event handler method will get called and this event hundred method we need to bind inside a constructor so I’m not going to cover event handling in react, so please spend few minutes to understand how the event handling works in the React all right let’s bind this method in a constructor.

There are basically different ways to bind or event handlers in react, but this is the recommended way to bind an event in a constructor to let’s create add employee method now what we’ll do whenever we click on add apply button then we should navigate to the creation employee component right for that let’s configure uh a routing over here let’s say this dot props dot history dot push and then slash add hyphen employee whenever we click on an apply button then this route will get called and corresponding to this route we have configured a component called create employee component open app.js file you can see here whenever we hit this URL in browser then this component will get rendered right, so this is what we have configured over here.

You might be wondering what is this history and how it works all right great let me quickly explain to you we have configured a react-router in the app.js file right so react-router basically maintains a history object and this history object has all the mappings of the routing, okay and react-router pass history object to each router as a prop, so we can access history object using props so react-router basically, provides history object for each route through props and we can get history object using props and this history object makes us manually control the history of the browser.

I hope you got the idea of how we can configure or how we can redirect to the respective components using history object and we basically get an HD object from the props and we can just configure the URL like this let me go to the creation employee component and inside that let me write some text over here or something like employee form and let’s save this file and let’s go back to the browser and just click on add employ button let me refresh first and click on add employ button, uh it is not a redirecting to the add employee page right so let me see what is the issue let’s go to the routing configuration.

Basically, we need to add an extract exact attribute because if you don’t specify exact then routing will try to know invoke all the components so whenever you want to you know navigate to the particular component and mention exact here okay exact so it means that you are redirecting to the exact route okay now let’s save this file let’s go back to the browser and you will be able to see employee form so we have successfully navigated to create employee company let’s design employee form let’s go back to the VS Code.

Let’s go to the employee create employee component and here we are going to design implied form let’s delete this let’s create a do and let’s add a CSS like a container within a new let’s create one more view and let’s add processes like row within a due let’s add one module and let’s have some CSS so look at here the form so we should know you know align the form at the center of the page, okay and we have to add a card here card means uh you know border to this phone so to achieve this we are going to add these CSS booth CSS classes okay great after that we need to add this text right this page title that is added employee for that let me add an s3 tag here.

This should be our text should be aligned at the center and after that let’s add a card called body let’s create a due okay and inside this do let’s create a form and lets inside a form let’s go ahead and let’s create our input fields okay great so look at here we have the first name last name and employee, so these are the input fields we are going to create in a form let’s create a new and then let’s add a CSS class like form group and after that let’s add a label let’s say the first name and then input field let’s look at here the input field we have added placeholder that is first name and name and then classes this is the bootstrap CSS class and the value we have a state inside a component.

Leave a Comment