Crud ID with javascript

Question

import api from '../../services/api'

export default function Area() {

    const [ area, setArea ] = useState([])

    useEffect(() => {
        async function loadArea() {
            const response = await api.get('/area')
            setArea(response.data)

        }
        loadArea()
    })

    async function handleDel(props) {

        const response = await api.delete(`/area/${_id}`)

    }

  return (
    <div className="container">
        <h5>Área</h5>

        <button className="btn btn-success">Adicionar</button>
        <table className="table">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Áreas</th>
                    <th scope="col">Ações</th>                
                </tr>
            </thead>

            <tbody>                
                {area.map(ar => (
                    <tr key={ar._id}>
                    <th scope="row">{ar._id}</th>
                    <td>{ar.area}</td>
                    <td>
                        <i className="fa fa-edit editar" ></i>
                        <i className="fa fa-trash delete" onClick={handleDel}></i>
                    </td>
                </tr>    
                ))}
            </tbody>                
        </table>
    </div>
  );
}

I want to receive the _id of useEffect so I can delete the object, I manually passed the id directly in the url worked, but I want to pass to the function handleDel receive and delete, how do I get this id? thank you.

Answer 1

You can pass the id inside the function as a parameter. Look at the click event, I passed the id as a parameter and in its function handleDel, I put receiving the _id as a parameter.

import api from '../../services/api'

export default function Area() {

    const [ area, setArea ] = useState([])

    useEffect(() => {
        async function loadArea() {
            const response = await api.get('/area')
            setArea(response.data)

        }
        loadArea()
    })

    async function handleDel(_id) {

        const response = await api.delete(`/area/${_id}`)

    }

  return (
    <div className="container">
        <h5>Área</h5>

        <button className="btn btn-success">Adicionar</button>
        <table className="table">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">Áreas</th>
                    <th scope="col">Ações</th>                
                </tr>
            </thead>

            <tbody>                
                {area.map(ar => (
                    <tr key={ar._id}>
                    <th scope="row">{ar._id}</th>
                    <td>{ar.area}</td>
                    <td>
                        <i className="fa fa-edit editar" ></i>
                        <i className="fa fa-trash delete" onClick={() => handleDel(arr._id)}></i>
                    </td>
                </tr>    
                ))}
            </tbody>                
        </table>
    </div>
  );
}