Es un programa, que simplemente obtiene datos específicos en cada fila haciendo clic en "agregar registro". Tengo dificultades para ejecutar la funcionalidad del botón Eliminar, donde al hacer clic en él, se eliminará esa fila en particular. Debe implementarse en DeleteHandler().
import React, { useState } from 'react' const DataFetch = () => { const [posts, setPosts] = useState([]); const ClickHandler = () => { const url = `https://swapi.dev/api/people/${Math.floor(Math.random() * 10) + 1}` const fetchData = async () => { try { const response = await fetch(url); const json = await response.json(); console.log(json); setPosts([...posts, json.name]) } catch (error) { console.log("error"); } }; fetchData(); } const DeleteHandler = (e) => { const name = e.target.getAttribute("name") console.log(name) } return ( <div> <div> <button onClick={ClickHandler}>ADD RECORD</button> </div> <table> {posts.map((post) => <tr> <td key={Math.random()}>{post}</td> <td><button name={post} onClick={()=>DeleteHandler}>delete</button></td> </tr> )} </table> </div> ); }; export default DataFetchDentro de su función DeleteHandler(), debería poder llamar a setPosts() y establecer las publicaciones en sí mismas menos la fila en la que se hizo clic, y luego su JSX sabrá que se debe volver a representar y la fila ya no debería estar allí.
Usa este código
import React, { useState } from "react"; let uidArray = []; const DataFetch = () => { const [posts, setPosts] = useState([]); const ClickHandler = () => { const url = `https://swapi.dev/api/people/${ Math.floor(Math.random() * 10) + 1 }`; const fetchData = async () => { try { const response = await fetch(url); const json = await response.json(); console.log(json); setPosts([...posts, json.name]); } catch (error) { console.log("error"); } }; fetchData(); }; const DeleteHandler = (e) => { const ele = document.getElementsByClassName(e)[0]; ele.remove(); }; return ( <div> <div> <button onClick={ClickHandler}>ADD RECORD</button> </div> <table> {posts.map((post) => ( <tr className={post}> <td key={Math.random()}>{post}</td> <td> <button name={post} onClick={() => DeleteHandler(post)}> delete </button> </td> </tr> ))} </table> </div> ); }; export default DataFetch;