react routing with parcel and router dom 6.3

react routing with parcel and router dom 6.3

• imports to router components.
• route path declaration.
• Axios requests.

>Solution :

route samples

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Form from "./Form";
import Home from "./Home";
import List from "./List";

const HomeRoute = ()=>{
    return(
        <div>
            <Router>
                <Routes>
                    <Route path = "/" exact element = {<Home/>}/>
                    <Route path = "/list" exact element = {<List/>}/>
                    <Route path = "/list/:id" exact element = {<Form/>}/>
                </Routes>
            </Router>
        </div>
    )
}
export default HomeRoute;

Axios requests

import axios from "axios";

class StudentSevices{
    getAllstudents(){
        return axios.get("http://localhost:8080/students/");
    }
    getStudent(id){
        return axios.get(`http://localhost:8080/students/${id}`);
    }
    createStudent(student){
        return axios.post("http://localhost:8080/students/", student);
    }
    updateStudent(id, student){
        return axios.put(`http://localhost:8080/students/${id}`, student)
    }
    deleteStudent(id){
        return axios.delete(`http://localhost:8080/students/${id}`)
    }
}
export default new StudentSevices;

sample components

import React, { useEffect } from "react";
import { useState } from "react";
import { useNavigate, useParams } from "react-router";
import StudentServices from "./api/StudentServices";


const List =()=>{
    const [student, setstudnt]= useState([]);
    const navigate = useNavigate();

    useEffect(()=>{
        StudentServices.getAllstudents().then(
            res=>{
                setstudnt(res.data)
            }
        )
    })

    const AddStudent = (e)=>{
        e.preventDefault()
        navigate("/list/-1")
    }
    const updteClicked =(id)=>{
        navigate(`/list/${id}`)
    }
    const dleteClicked =(id)=>{
        StudentServices.deleteStudent(id)
    }
    return(
        <div>
            <button onClick={AddStudent}>add student</button>
            <h1>student list</h1><br/>

            <table>
                <thead>
                    <tr>
                        <th> f name</th>
                        <th> l name</th>
                        <th> gender</th>
                        <th> update</th>
                        <th> delete</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        student.map(
                            student =>
                            <tr key={student.id}>
                                    <td>{student.firstName}</td>
                                    <td>{student.lastName}</td>
                                    <td>{student.gender}</td>
                                <td><button onClick={()=>updteClicked(student.id)}>update</button></td>
                                <td><button onClick={()=>dleteClicked(student.id)}>delete</button></td>
                            </tr>
                        )
                    }
                </tbody>
            </table>

        </div>
    )
}
export default List;

import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router";
import StudentServices from "./api/StudentServices";

const Form =(params)=>{
    const [status, setstatus] = useState("");
    const {id} = useParams();
    const [student, setstudent] = useState([]);
    const [firstName, setfirstName] =  useState("first name");
    const [lastName, setlastName] = useState(" Last name");
    const [gender, setgender] = useState("Select Gender");
    const nav = useNavigate();

    useEffect(()=>{
        if (id=="-1"){
            setstatus("Register New ") 
        }else{
            setstatus("Update ")
            StudentServices.getStudent(id).then(
                res=>{
                    setstudent(res.data)
                }
            )
        }
    })

    const submitClicked=(e)=>{
        e.preventDefault();
        if (id == "-1"){
            const newstudent ={
                firstName,
                lastName,
                gender
            }
            StudentServices.createStudent(newstudent)
            nav("/students")
            console.log(newstudent);
        }else{
            const newstudent ={
                firstName,
                lastName,
                gender
            }
            StudentServices.updateStudent(id, newstudent)
            nav("/students")
            console.log(newstudent);
        }
        
    }
    return(
        <div>
        <h1>{status} Sudent</h1>
        <form onSubmit={submitClicked}>
        <label>Fist Name : </label>
        <input type="text"  onChange={(e)=>{setfirstName(e.target.value)}}placeholder={student.firstName} required></input>
        <br></br>
        <label>Last Name : </label>
        <input type="text"  onChange={(e)=>{setlastName(e.target.value)}} placeholder={student.lastName} required/>
        <br></br>
        <label>
          Gender:
          </label>
          <select value={gender}  onChange={(e)=>{setgender(e.target.value)}}>
          <option>{gender}</option>
            <option value= "Female">Female</option>
            <option value= "Male">Male</option>
          </select>
        
        <br/>
        <input type="submit" value="Submit" />
      </form>
    </div>
    )
}
export default Form;