in these function id is not passing to form

June 28, 2022

These are the imports and Table component

import axios from "axios";
import React,{ useState,useEffect }  from "react";
import {Link,useNavigate} from 'react-router-dom'

This is main home class of the coomponent and the useEffect update item and also delete item and there is a add item button too

export const Home =()=>{
const [items, setItems] = useState([]);
const navigete = useNavigate();

this is use effect hook and get item function

useEffect(() => {
    getItems();
}, )


const getItems =()=>{
    axios.get('http://localhost:8000/items/')
            .then((res)=>{setItems(res.data)})
}

this is update item delete item and add item

 const updateItem = (items,_id)=>{
        console.log({_id})
        navigete(`/itemForm/${items._id}`);

    }

const deleteItem =(_id)=>{
    axios.delete(`http://localhost:8000/items/${_id}`)
        .then((res)=>{getItems()})
}

const AddItem = ()=>{
    navigete(`/itemForm`);
}

this is my return function in the component

return(
    <div>HEllo home page

        <button onClick={()=>AddItem()} >Add item</button>

this is the table that showing get details

    <h2>Table</h2>
    <table>
        <thead>
            <tr>
                <th>Item ID</th>
                <th>Item Name</th>
                <th>Update</th>
                <th>Delete</th>
            </tr>
        </thead>
        <tbody>
           {items.map(items=>(
            <tr key={items._id}>
                <td>{items.itemId}</td>
                <td>{items.itemName}</td>
                <td><Link to={`/itemForm/${items._id}`} >Update</Link></td>
                <td><button onClick={()=>deleteItem(items._id)} >Delete</button></td>
            </tr>
           ))

           }
        </tbody>
    </table>

this commented code is for get the data JSON format

        {/* <code>
            <pre>{JSON.stringify(courses, null, 2)}</pre>
        </code> */}

    </div>
    )
     }

this is the form file

these are the imports

import React,{useEffect, useState,} from "react";
import {useParams} from 'react-router-dom';
import axios from 'axios'
import ItemService from "./ItemService";

this is form component this includes both add and update

export const ItemForm = ()=>{
const [itemName, setItemName] = useState("");
const [itemId, setItemId] = useState("");
const [item, setItem] = useState([])
const {id} = useParams();

this is useEffect hook this returns all the

useEffect(()=>{
    if(id){
        const itemObj = {itemName, itemId};
        axios.get(`http://localhost:8000/items/${id}`,itemObj)
                .then((res)=>{setItem(res.data)})
                .catch((err)=>{alert(err.message)})   
    }
},[])

this is the save item function this includes both add and update function

const saveItem = (e)=>{
    if(id){
        e.preventDefault();
        const itemObj = {itemName, itemId};
        axios.put(`http://localhost:8000/items/${id}`,itemObj)
                .then((res)=>{alert("data updated")})
                .catch((err)=>{alert(err.message)})   
        // ItemService.updateItem(id,itemObj)
               
    }else{
        e.preventDefault();
        const itemObj = {itemName, itemId};
        axios.post(`http://localhost:8000/items/add`,itemObj)
                .then((res)=>{alert("data addedcx")})
                .catch((err)=>{alert(err.message)})
    }
}

this is return function contains the form

return(
    <div>
        <h2>Add or Update item</h2>
        <form onSubmit={e=>saveItem(e)} >
        <input placeholder={item.itemName} type="text" value={itemName} onChange= 
         {(e)=>setItemName(e.target.value)} />
        <br></br>
        <input placeholder={item.itemId} type="text" value={itemId} onChange= 
         {(e)=>setItemId(e.target.value)} />
        <br></br>
        <button type="submit" >Submit</button>
        </form>
        
    </div>
)

}