If you are running with React, it may be rather obscure and enforce API Requests.
So on this article, we’re going to learn the way all of it works via imposing CRUD Operations the usage of React, React Hooks, React Router, and Axios.
Let’s dive in.
Learn how to Set up Node and npm
To start with, let’s set up Node in our device. We’re going to basically use it to execute our JavaScript code.
To obtain Node, move to https://nodejs.org/en/.
You can additionally want the node package deal supervisor, or npm, which is constructed on Node. You’ll be able to use it to put in applications to your JavaScript apps. Thankfully it comes with Node, so you do not want to obtain it one by one.
As soon as either one of them are completed, open your terminal or command steered and kind node -v. This assessments which model of Node you might have.
Learn how to Create your React Software
To create your React software, sort npx create-react-app <Your app title> to your terminal, or react-crud on this case.
You can see that the applications are being put in.
As soon as the applications are accomplished, move into the challenge folder and kind npm birth.
You can see the default React template, like this:
Learn how to Set up the Semantic UI Package deal for React
Let’s set up the Semantic UI React package deal in our challenge. Semantic UI is an UI library made for React that has pre-built UI parts like tables, buttons, and lots of options.
You’ll be able to set up it the usage of some of the instructions under, relying for your package deal supervisor.
yarn upload semantic-ui-react semantic-ui-cssnpm set up semantic-ui-react semantic-ui-cssAdditionally, import the library to your app’s leading access record, which is index.js.
import 'semantic-ui-css/semantic.min.css'Learn how to Construct your CRUD Software
Now, let’s birth construction our CRUD Software the usage of React.
First, we’re going to upload a heading to our software.
In our app.js record, upload a heading like this:
import './App.css';
serve as App() {
go back (
<div>
React Crud Operations
</div>
);
}
export default App;
Now, let’s be certain it is within the heart.
Give the father or mother div a classname of leading. And within the App.css record, we will be able to use Flexbox to heart the header.
import './App.css';
serve as App() {
go back (
<div className="leading">
React Crud Operations
</div>
);
}
export default App;
.leading{
show: flex;
justify-content: heart;
align-items: heart;
peak: 100vh;
}Now our heading in completely targeted.
So it appears to be like just a little higher, we want to make it bolder and upload some cool fonts. To do that, we’re going to use heading tags round our header like this:
import './App.css';
serve as App() {
go back (
<div className="leading">
<h2 className="main-header">React Crud Operations</h2>
</div>
);
}
export default App;
Let’s import a font from Google Font. Head over to https://fonts.google.com/ to select one.
Make a choice any font of your liking, however I can use the Montserrat font-family.
Import the font of your selection within the App.css record, like this:
@import url('https://fonts.googleapis.com/css2?kin=Montserrat&show=switch');
Now, let’s exchange the font of the header.
<div className="leading">
<h2 className="main-header">React Crud Operations</h2>
</div>Give the heading tag a className of main-header, identical to this.
Then, to your App.css, upload the font kin:
.main-header{
font-family: 'Montserrat', sans-serif;
}Learn how to Create your CRUD Elements
Let’s create 4 CRUD Elements, which might be Create, Learn, Replace and Delete.
In our src folder, create a folder referred to as parts. And within this folder, create 3 information – create, learn and replace. For delete, we don’t want any additional part.
Now, let’s enforce the Create operation.
However for that, we want to use Mock API’s. Those API’s will ship knowledge to the faux server that we will be able to create, only for studying functions.
Now, create a brand new useful resource via clicking at the NEW RESOURCE button.
It is going to ask you for the Useful resource Identify, so input the title you want to make use of.
Take away the additional fields like title, avatar, or createdAt, as a result of we may not be wanting the ones. Then, click on Create.
Now, we’ve created our faux API, which I named fakeData.
Click on on fakeData, and you are going to see the API opening up in a brand new tab. The database is empty presently.
Learn how to Create a Shape for the Create Part
Let’s use a kind from the Semantic UI library.
Head to Semantic React, and seek for Shape within the seek bar at the left.
You’re going to see a kind like this, so click on on Check out it on the best proper to get the code.
Replica this code and paste it into your Create.js record like this:
import React from 'react'
import { Button, Checkbox, Shape } from 'semantic-ui-react'
const Create = () => (
<Shape>
<Shape.Box>
<label>First Identify</label>
<enter placeholder='First Identify' />
</Shape.Box>
<Shape.Box>
<label>Remaining Identify</label>
<enter placeholder='Remaining Identify' />
</Shape.Box>
<Shape.Box>
<Checkbox label='I conform to the Phrases and Prerequisites' />
</Shape.Box>
<Button sort='post'>Put up</Button>
</Shape>
)
export default Create;Import the Create Part to your app.js record.
import './App.css';
import Create from './parts/create';
serve as App() {
go back (
<div className="leading">
<h2 className="main-header">React Crud Operations</h2>
<div>
<Create/>
</div>
</div>
);
}
export default App;
Identical to this:
However there’s a downside right here – the goods don’t seem to be correctly aligned and the textual content enter label colours are black. So, let’s exchange it.
Within the create.js record, give Shape a className of create-form.
import React from 'react'
import { Button, Checkbox, Shape } from 'semantic-ui-react'
const Create = () => (
<Shape className="create-form">
<Shape.Box>
<label>First Identify</label>
<enter placeholder='First Identify' />
</Shape.Box>
<Shape.Box>
<label>Remaining Identify</label>
<enter placeholder='Remaining Identify' />
</Shape.Box>
<Shape.Box>
<Checkbox label='I conform to the Phrases and Prerequisites' />
</Shape.Box>
<Button sort='post'>Put up</Button>
</Shape>
)
export default Create;And upload the next elegance to your App.css record:
.create-form label{
shade: whitesmoke !essential;
font-family: 'Montserrat', sans-serif;
font-size: 12px !essential;
}This elegance will goal the entire type box labels and observe the colour whitesmoke. It is going to additionally exchange the font and build up the font-size.
Now, in our leading elegance, upload a flex-direction assets. This assets will set the course to column, so each and every component in the principle className might be vertically aligned.
.leading{
show: flex;
justify-content: heart;
align-items: heart;
peak: 100vh;
background-color: #212121;
shade: whitesmoke;
flex-direction: column;
}You’ll be able to see that our type appears to be like a lot better now.
Subsequent, let’s get knowledge from the shape fields into our console. For that, we will be able to use the useState hook in React.
In our create.js record, import useState from React.
import React, { useState } from 'react';Then, create states for first title, ultimate title, and the checkbox. We’re initializing the states as empty or false.
import React, { useState } from 'react';
import { Button, Checkbox, Shape } from 'semantic-ui-react'
export default serve as Create() {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [checkbox, setCheckbox] = useState(false);
go back (
<div>
<Shape className="create-form">
<Shape.Box>
<label>First Identify</label>
<enter placeholder='First Identify' />
</Shape.Box>
<Shape.Box>
<label>Remaining Identify</label>
<enter placeholder='Remaining Identify' />
</Shape.Box>
<Shape.Box>
<Checkbox label='I conform to the Phrases and Prerequisites' />
</Shape.Box>
<Button sort='post'>Put up</Button>
</Shape>
</div>
)
}
You’ll be able to see that that is now appearing as a practical part. So, we want to exchange the part right into a practical part. It is because we will be able to simplest use hooks in practical parts.
Now, let’s arrange the primary title, the ultimate title, and the checkbox the usage of the setFirstName, setLastName, and setCheckbox homes, respectively.
<enter placeholder='First Identify' onChange={(e) => setFirstName(e.goal.worth)}/>
<enter placeholder='Remaining Identify' onChange={(e) => setLastName(e.goal.worth)}/>
<Checkbox label='I conform to the Phrases and Prerequisites' onChange={(e) => setCheckbox(!checkbox)}/>We’re taking pictures the states of first title, ultimate title, and the checkbox.
Create a serve as referred to as postData that we’re going to use to ship knowledge to the API. Throughout the serve as, write this code:
const postData = () => {
console.log(firstName);
console.log(lastName);
console.log(checkbox);
}We’re logging the primary title, ultimate title, and the checkbox values within the console.
At the Put up button, assign this serve as the usage of an onClick tournament in order that each time we press the Put up Button, this serve as might be referred to as.
<Button onClick={postData} sort='post'>Put up</Button>This is the entire code for the create record:
import React, { useState } from 'react';
import { Button, Checkbox, Shape } from 'semantic-ui-react'
export default serve as Create() {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [checkbox, setCheckbox] = useState(false);
const postData = () => {
console.log(firstName);
console.log(lastName);
console.log(checkbox);
}
go back (
<div>
<Shape className="create-form">
<Shape.Box>
<label>First Identify</label>
<enter placeholder='First Identify' onChange={(e) => setFirstName(e.goal.worth)}/>
</Shape.Box>
<Shape.Box>
<label>Remaining Identify</label>
<enter placeholder='Remaining Identify' onChange={(e) => setLastName(e.goal.worth)}/>
</Shape.Box>
<Shape.Box>
<Checkbox label='I conform to the Phrases and Prerequisites' onChange={(e) => setCheckbox(!checkbox)}/>
</Shape.Box>
<Button onClick={postData} sort='post'>Put up</Button>
</Shape>
</div>
)
}
Kind some worth within the first title and ultimate title, and take a look at the checkbox. Then, click on the Put up button. You’re going to see the information doping up within the console like this:
Learn how to Use Axios to Ship API Requests to the Mock APIs
Let’s use Axios to ship our type knowledge to the mock server.
However first, we want to set up it.
Simply sort npm i axios to put in this package deal.
After the package deal has been put in, let’s birth the create operation.
Import Axios on the best of the record.
import axios from 'axios';Within the postData serve as, we will be able to use Axios to ship the POST request.
const postData = () => {
axios.submit(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`, {
firstName,
lastName,
checkbox
})
}As you’ll see, we’re the usage of axios.submit. And within axios.submit, we’ve the API endpoint, which we created previous. Then, we’ve the shape fields wrapped in curly brackets.
After we click on Put up, this serve as might be referred to as and it’ll submit knowledge to the API server.
Input your first title, ultimate title, and take a look at the checkbox. Click on post.
Then for those who take a look at the API, you are going to get your first title, ultimate title, and the checkbox as true, wrapped in an object.
Learn how to Put in force the Learn and Replace Operations
To start out the learn operation, we want to create a Learn Web page. We additionally want the React Router package deal to navigate to other pages.
package deal the usage of npm i react-router-dom.
After it’s been put in, import a couple of issues from React Router:
import { BrowserRouter as Router, Course } from 'react-router-dom'In our App.js, wrap the entire go back right into a Router. This principally implies that no matter is within this Router will have the ability to use routing in React.
import './App.css';
import Create from './parts/create';
import { BrowserRouter as Router, Course } from 'react-router-dom'
serve as App() {
go back (
<Router>
<div className="leading">
<h2 className="main-header">React Crud Operations</h2>
<div>
<Create />
</div>
</div>
</Router>
);
}
export default App;
Our App.js will appear to be the above now.
Exchange the Create within the go back and upload the next code:
import './App.css';
import Create from './parts/create';
import { BrowserRouter as Router, Course } from 'react-router-dom'
serve as App() {
go back (
<Router>
<div className="leading">
<h2 className="main-header">React Crud Operations</h2>
<div>
<Course precise trail='/create' part={Create} />
</div>
</div>
</Router>
);
}
export default App;
Right here, we’re the usage of the Course part as Create. We now have set the trail of Create to ‘/create’. So, if we move http://localhost:3000/create, we will be able to see the create web page.
In a similar fashion, we want routes for learn and replace.
import './App.css';
import Create from './parts/create';
import Learn from './parts/learn';
import Replace from './parts/replace';
import { BrowserRouter as Router, Course } from 'react-router-dom'
serve as App() {
go back (
<Router>
<div className="leading">
<h2 className="main-header">React Crud Operations</h2>
<div>
<Course precise trail='/create' part={Create} />
</div>
<div taste={{ marginTop: 20 }}>
<Course precise trail='/learn' part={Learn} />
</div>
<Course trail='/replace' part={Replace} />
</div>
</Router>
);
}
export default App;
So create the learn and replace routes identical to you notice above.
And for those who move to http://localhost:3000/learn, you are going to see the next:
And on http://localhost:3000/replace, we will be able to see Replace Part like this:
The Learn Operation
For the Learn operation, we will be able to desire a Desk part. So, head over to React Semantic UI and use a desk from the library.
import React from 'react';
import { Desk } from 'semantic-ui-react'
export default serve as Learn() {
go back (
<div>
<Desk singleLine>
<Desk.Header>
<Desk.Row>
<Desk.HeaderCell>Identify</Desk.HeaderCell>
<Desk.HeaderCell>Registration Date</Desk.HeaderCell>
<Desk.HeaderCell>Email deal with</Desk.HeaderCell>
<Desk.HeaderCell>Top class Plan</Desk.HeaderCell>
</Desk.Row>
</Desk.Header>
<Desk.Frame>
<Desk.Row>
<Desk.Cellular>John Lilki</Desk.Cellular>
<Desk.Cellular>September 14, 2013</Desk.Cellular>
<Desk.Cellular>[email protected]</Desk.Cellular>
<Desk.Cellular>No</Desk.Cellular>
</Desk.Row>
<Desk.Row>
<Desk.Cellular>Jamie Harington</Desk.Cellular>
<Desk.Cellular>January 11, 2014</Desk.Cellular>
<Desk.Cellular>[email protected]</Desk.Cellular>
<Desk.Cellular>Sure</Desk.Cellular>
</Desk.Row>
<Desk.Row>
<Desk.Cellular>Jill Lewis</Desk.Cellular>
<Desk.Cellular>Might 11, 2014</Desk.Cellular>
<Desk.Cellular>[email protected]</Desk.Cellular>
<Desk.Cellular>Sure</Desk.Cellular>
</Desk.Row>
</Desk.Frame>
</Desk>
</div>
)
}
Right here, you’ll see we’ve a desk with some dummy knowledge. However we simplest want one Desk Row. So, let’s take away the remaining.
import React from 'react';
import { Desk } from 'semantic-ui-react'
export default serve as Learn() {
go back (
<div>
<Desk singleLine>
<Desk.Header>
<Desk.Row>
<Desk.HeaderCell>Identify</Desk.HeaderCell>
<Desk.HeaderCell>Registration Date</Desk.HeaderCell>
<Desk.HeaderCell>Email deal with</Desk.HeaderCell>
<Desk.HeaderCell>Top class Plan</Desk.HeaderCell>
</Desk.Row>
</Desk.Header>
<Desk.Frame>
<Desk.Row>
<Desk.Cellular>John Lilki</Desk.Cellular>
<Desk.Cellular>September 14, 2013</Desk.Cellular>
<Desk.Cellular>[email protected]</Desk.Cellular>
<Desk.Cellular>No</Desk.Cellular>
</Desk.Row>
</Desk.Frame>
</Desk>
</div>
)
}
That is the output of the Learn web page. We now have a desk with 4 columns, however we simplest want 3.
Take away the additional box columns and rename the fields like this:
That is how our Learn Web page appears to be like now:
import React from 'react';
import { Desk } from 'semantic-ui-react'
export default serve as Learn() {
go back (
<div>
<Desk singleLine>
<Desk.Header>
<Desk.Row>
<Desk.HeaderCell>First Identify</Desk.HeaderCell>
<Desk.HeaderCell>Remaining Identify</Desk.HeaderCell>
<Desk.HeaderCell>Checked</Desk.HeaderCell>
</Desk.Row>
</Desk.Header>
<Desk.Frame>
<Desk.Row>
<Desk.Cellular>Nishant</Desk.Cellular>
<Desk.Cellular>Kumar</Desk.Cellular>
<Desk.Cellular>Sure</Desk.Cellular>
</Desk.Row>
</Desk.Frame>
</Desk>
</div>
)
}
Now, let’s ship the GET Request to get the information from the API.
We want the information when our software rather a lot. So, we’re going to use the useEffect Hook.
import React, { useEffect } from 'react';
useEffect(() => {
}, [])Create one state that can comprise the incoming knowledge. This might be an array.
import React, { useEffect, useState } from 'react';
const [APIData, setAPIData] = useState([]);
useEffect(() => {
}, [])Within the useEffect Hook, let’s ship the GET Request.
useEffect(() => {
axios.get(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`)
.then((reaction) => {
setAPIData(reaction.knowledge);
})
}, [])So, we’re the usage of axios.get to ship the GET request to the API. Then, if the request is fulfilled, we’re atmosphere the reaction knowledge in our APIData state.
Now, let’s map our Desk rows consistent with the API Knowledge.
We’re going to use the Map serve as to do that. It is going to iterate over the array and show the information within the output.
<Desk.Frame>
{APIData.map((knowledge) => {
go back (
<Desk.Row>
<Desk.Cellular>{knowledge.firstName}</Desk.Cellular>
<Desk.Cellular>{knowledge.lastName}</Desk.Cellular>
<Desk.Cellular>{knowledge.checkbox ? 'Checked' : 'Unchecked'}</Desk.Cellular>
</Desk.Row>
)})}
</Desk.Frame>We’re mapping our firstName, lastName, and checkbox in accordance the information within the API. However our checkbox is just a little bit other. I’ve used a Ternary Operator (‘?’) right here. If the information.checkbox is correct, the output might be Checked, or else it’ll be Unchecked.
The Replace Operation
Create yet one more header for Replace and one column within the desk row for an replace button. Use the button from Semantic UI React.
<Desk.HeaderCell>Replace</Desk.HeaderCell>
<Desk.Cellular>
<Button>Replace</Button>
</Desk.Cellular>Now, after we click on this button, we must be redirected to the replace web page. For that, we want Hyperlink from React Router.
Import Hyperlink from React Router. And wrap the desk mobile for the replace button into Hyperlink tags.
import { Hyperlink } from 'react-router-dom';
<Hyperlink to='/replace'>
<Desk.Cellular>
<Button>Replace</Button>
</Desk.Cellular>
</Hyperlink>So, if we click on replace button, we will be able to be redirected to the replace web page.
In an effort to replace the column knowledge, we want their respective ID’s, which comes from the APIs.
Create a serve as referred to as setData. Bind it to the Replace button.
<Button onClick={() => setData()}>Replace</Button>Now, we want to move the information as a parameter to the highest serve as.
<Button onClick={() => setData(knowledge)}>Replace</Button>And within the serve as on the best, log this information within the console:
const setData = (knowledge) => {
console.log(knowledge);
}Click on the replace button within the desk, and take a look at the console. You’re going to get the information of the respective desk box.
Let’s set this information into the localStorage.
const setData = (knowledge) => {
let { identity, firstName, lastName, checkbox } = knowledge;
localStorage.setItem('ID', identity);
localStorage.setItem('First Identify', firstName);
localStorage.setItem('Remaining Identify', lastName);
localStorage.setItem('Checkbox Worth', checkbox)
}We’re destructuring our knowledge into identity, firstName, lastName, and checkbox, after which we’re atmosphere this information into native garage. You’ll be able to use native garage to retailer knowledge in the community within the browser.
Now, within the Replace part, we want one type for the replace operation. Let’s reuse the shape from our Create part. Simply exchange the title of the serve as from Create to Replace.
import React, { useState } from 'react';
import { Button, Checkbox, Shape } from 'semantic-ui-react'
import axios from 'axios';
export default serve as Replace() {
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [checkbox, setCheckbox] = useState(false);
go back (
<div>
<Shape className="create-form">
<Shape.Box>
<label>First Identify</label>
<enter placeholder='First Identify' onChange={(e) => setFirstName(e.goal.worth)}/>
</Shape.Box>
<Shape.Box>
<label>Remaining Identify</label>
<enter placeholder='Remaining Identify' onChange={(e) => setLastName(e.goal.worth)}/>
</Shape.Box>
<Shape.Box>
<Checkbox label='I conform to the Phrases and Prerequisites' onChange={(e) => setCheckbox(!checkbox)}/>
</Shape.Box>
<Button sort='post'>Replace</Button>
</Shape>
</div>
)
}
Create a useEffect hook within the Replace part. We will be able to use it to get knowledge we up to now saved in Native Garage. Additionally, create yet one more state for the ID box.
const [id, setID] = useState(null);
useEffect(() => {
setID(localStorage.getItem('ID'))
setFirstName(localStorage.getItem('First Identify'));
setLastName(localStorage.getItem('Remaining Identify'));
setCheckbox(localStorage.getItem('Checkbox Worth'))
}, []);Set the respective knowledge consistent with your keys from Native Garage. We want to set those values in type fields. It is going to robotically populate the fields when the Replace web page rather a lot.
<Shape className="create-form">
<Shape.Box>
<label>First Identify</label>
<enter placeholder='First Identify' worth={firstName} onChange={(e) => setFirstName(e.goal.worth)}/>
</Shape.Box>
<Shape.Box>
<label>Remaining Identify</label>
<enter placeholder='Remaining Identify' worth={lastName} onChange={(e) => setLastName(e.goal.worth)}/>
</Shape.Box>
<Shape.Box>
<Checkbox label='I conform to the Phrases and Prerequisites' checked={checkbox} onChange={(e) => setCheckbox(!checkbox)}/>
</Shape.Box>
<Button sort='post'>Replace</Button>
</Shape>Now, if we click on the Replace button in Learn Web page, we will be able to be redirected to the replace web page, the place we will be able to see the entire auto populated type knowledge.
Now, let’s create the Replace request to replace the information.
Create a serve as referred to as updateAPIData. Within this serve as, we’re going to use axios.put to ship a PUT request that can replace our knowledge.
const updateAPIData = () => {
axios.put(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${identity}`, {
firstName,
lastName,
checkbox
})
}Right here, you’ll see we’re appending the API endpoint with an identity box.
After we click on the sphere within the desk, its ID is getting saved into Native Garage. And within the Replace web page, we’re retrieving it. Then, we’re storing that ID within the identity state.
After that, we move the identity to the endpoint. This permits us to replace the sphere of which we’re passing the ID.
Bind the updateAPIData serve as to the Replace button.
<Button sort='post' onClick={updateAPIData}>Replace</Button>Click on the Replace button within the desk in Learn web page, exchange your ultimate title, after which click on the Replace button within the Replace web page.
Return to the Learn web page, or take a look at the API. You’re going to see your ultimate title has been modified.
The Delete Operation
Upload yet one more Button within the Learn desk, which we’re going to use for the Delete operation.
<Desk.Cellular>
<Button onClick={() => onDelete(knowledge.identity)}>Delete</Button>
</Desk.Cellular>Create a serve as referred to as onDelete, and bind this serve as to the Delete button. This serve as will obtain an ID parameter at the Delete button click on.
const onDelete = (identity) => {
}We’re going to use axios.delete to delete the respective columns.
const onDelete = (identity) => {
axios.delete(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${identity}`)
}Click on the Delete button and take a look at the API. You’re going to see the information has been deleted.
We want to load the desk knowledge after it’s been deleted.
So, create a serve as to load the API knowledge.
const getData = () => {
axios.get(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`)
.then((getData) => {
setAPIData(getData.knowledge);
})
}Now, within the onDelete serve as, we want to load the up to date knowledge when we delete a box.
const onDelete = (identity) => {
axios.delete(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${identity}`)
.then(() => {
getData();
})
}So, now if we click on Delete on any box, it’ll delete that box and refresh the desk robotically.
Let’s Make Some Enhancements to our CRUD App
So, after we submit our knowledge within the Create web page, we’re simply getting the information within the mock database. We want to redirect to the Learn web page when our knowledge is created within the Create web page.
Import useHistory from React Router.
import { useHistory } from 'react-router';Create a variable referred to as historical past with let, and set it to useHistory:
let historical past = useHistory();Then, use the historical past.push serve as to push to the Learn web page simply after the submit API will get referred to as.
const postData = () => {
axios.submit(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData`, {
firstName,
lastName,
checkbox
}).then(() => {
historical past.push('/learn')
})
}It is going to push to the Learn web page the usage of the useHistory hook.
Do the similar for the Replace web page.
import React, { useState, useEffect } from 'react';
import { Button, Checkbox, Shape } from 'semantic-ui-react'
import axios from 'axios';
import { useHistory } from 'react-router';
export default serve as Replace() {
let historical past = useHistory();
const [id, setID] = useState(null);
const [firstName, setFirstName] = useState('');
const [lastName, setLastName] = useState('');
const [checkbox, setCheckbox] = useState(false);
useEffect(() => {
setID(localStorage.getItem('ID'))
setFirstName(localStorage.getItem('First Identify'));
setLastName(localStorage.getItem('Remaining Identify'));
setCheckbox(localStorage.getItem('Checkbox Worth'));
}, []);
const updateAPIData = () => {
axios.put(`https://60fbca4591156a0017b4c8a7.mockapi.io/fakeData/${identity}`, {
firstName,
lastName,
checkbox
}).then(() => {
historical past.push('/learn')
})
}
go back (
<div>
<Shape className="create-form">
<Shape.Box>
<label>First Identify</label>
<enter placeholder='First Identify' worth={firstName} onChange={(e) => setFirstName(e.goal.worth)}/>
</Shape.Box>
<Shape.Box>
<label>Remaining Identify</label>
<enter placeholder='Remaining Identify' worth={lastName} onChange={(e) => setLastName(e.goal.worth)}/>
</Shape.Box>
<Shape.Box>
<Checkbox label='I conform to the Phrases and Prerequisites' checked={checkbox} onChange={() => setCheckbox(!checkbox)}/>
</Shape.Box>
<Button sort='post' onClick={updateAPIData}>Replace</Button>
</Shape>
</div>
)
}
And now you understand how to accomplish CRUD operations the usage of React and React Hooks!
However, you’ll watch my Youtube video on React CRUD Operations if you wish to complement your studying.
You’ll be able to in finding the code on GitHub if you wish to experiment additional.
