React-js CRUD Opearation using RESTFull API

0

                                                                    

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







Post a Comment

0Comments

POST Answer of Questions and ASK to Doubt

Post a Comment (0)