React-js CRUD Opearation using RESTFull API

                                                                    

React-js CRUD Operation using RESTFull API

React-js CRUD Operation using restful API:-

In this article, I have described using Restful API using AXIOS Library.

Create Master.js to design the layout

import React   from 'react';

import { Outlet } from 'react-router-dom';

import Header from './Header';

import Footer from './Footer';

function Master()

{

  return(

        <div>

            <Header />

            <Outlet />

            <Footer />

        </div>

    );

}

export default Master; 

Step 1st:-

Create APP.js and define the path

import React   from 'react';

import Master from './Master';

import Edit from './Edit';

import Delete from './Delete';

import { BrowserRouter, Routes, Route } from "react-router-dom";

import { AxiosExample } from './AxiosExample';

function App() {

  return (

    <BrowserRouter>

    <Routes>

      <Route path="/" element={<Master />}>

       

        <Route index  element={<AxiosExample />} />

        <Route path="edit"  element={<Edit />} />

        <Route path="delete"  element={<Delete />} />

       

        </Route>

    </Routes>

  </BrowserRouter>

  );

}

export default App;

2)  Create AXIOS  Component:-

import React from "react";

import axios from 'axios'

import { Link } from "react-router-dom";

export class AxiosExample extends React.Component

{

   constructor()

   {

    super();

    this.state = {

       tdata:[]      

     }

   }

  

   componentDidMount()

   {

    axios.get('https://jsonplaceholder.typicode.com/posts').then((repos) => {

    

      this.setState({ tdata: repos.data})

     // console.log(this.state.tdata)

    });

    }

   render()

   {

       return(

           <div>

               <Link to="/Edit" state="abc">Edit</Link>

               <table border='1'>

               <tbody>

                  <tr><th>User ID </th><th>Id</th><th>Title</th><th>Body</th><th>E</th><th>D</th></tr>

                  {this.state.tdata.map((person,i)=> <TableRow Key={i} data={person} />)}   

                  </tbody>

               </table>

               <h1>Welcome in REST API Implementation in React JS</h1>

           </div>

       )

   }

}

class TableRow extends React.Component

{

    render()

    {

        return(

            <tr>

             <td>{this.props.data.userId}</td>

             <td>{this.props.data.id}</td>

             <td>{this.props.data.title}</td>

             <td>{this.props.data.body}</td>

             <td><Link to="/Edit" state={this.props.data.id} >Edit</Link></td>

             <td><Link to="/Delete">Delete</Link></td>

            

             

          </tr>

        )

    }

}

3)    Create Edit.js Component:-

import React, { useState }   from 'react';

import { useLocation } from "react-router";

import axios from 'axios'

function Edit()

{

 let data = useLocation();

 console.log(data.state);

 const baseURL = "https://jsonplaceholder.typicode.com/posts/"+data.state;

 const [post, setPost] = React.useState(null);

 const [title,setTitle]= useState("")

 const [body,setBody]= useState("")

 React.useEffect(() => {

    axios.get(baseURL).then((response) => {

      setPost(response.data);

    });

  }, []);

  const handelInput =(e)=>{

    switch (e.target.id) {

        case "title":

            setTitle(e.target.value)

           

            break;

        case "body":

            setBody(e.target.value)

            break;

       

        default:

            break;

    }

}

const changeSubmit =(e)=>{

    e.preventDefault()   

    axios

    .put(baseURL, {

      title: title,

      body: body

    })

    .then((response) => {

     // setPost(response.data);

     window.location.href="/";

    });

     

   

}

  if (!post) return null;

   return(

       <div id="middle">

           

          

            <form onSubmit={changeSubmit}>

            USERID <input type="text"  id='uid' value={post.userId}  />   

            <br />

            ID <input type="text"  id='id' value={post.id}       />   

            <br />  

            Title  <input type="text"  id='title'  onChange={handelInput} />

            <br />

             Body <input type="text"  id='body'  onChange={handelInput}/>

            <br />

            <button type="submit" value="Submit">Submit</button>

        </form>

           <p>Edit Component {data.state}</p>

       </div>

   );

}

export default Edit;

4)  Create Delete.js

try with self

5)  Create Insert.js

try with self