Creo una tabla para que pueda agregar y eliminar elementos. La eliminación, según tengo entendido, debe realizarse a través de .filter() para la identificación única de cada elemento que aplico Date.now() . El problema es que no puedo pasar el valor de la identificación del elemento secundario ( Li ) al elemento principal ( Aplicación ). React muestra constantemente el error de que deleteRow no es una función . Como si entendiera que es un parámetro, pero ¿cómo se puede llamar? Gracias a todos los que respondan!!!
Aplicación.js
import { Button } from 'primereact/button'; import './App.css'; import Li from './components/Li' import './component_style/Ul.css' import { useState } from 'react'; function App() { let tableId = 0 ; const [tableRows, setTableRows] = useState([ { id: Date.now(), firstName: "lorem", secondName: "lorem", lastName: "lorem"} ]); const addNewRow = () =>{ const newRow = { id:Date.now(), firstName: "", secondName: "", lastName: "" } setTableRows([...tableRows, newRow]) } ///////////////////////////////////////// function deleteRow(){ console.log("tableId") } ////////////////////////////////////////// return ( <div className="App"> <Button onClick = {deleteRow}>Add new stroke</Button> <ul className = 'ul__box'> {tableRows.map((row,id) =>{ if(row) return(<Li row={row} key={id} deleteRows = {deleteRow} /> ) } )} </ul> </div> ); } export default App;Li.js
import Inputs from './Inputs'; import {Button} from '../../node_modules/primereact/button' import '../component_style/Li.css' function Li(props, deleteRows){ let idTable = props.row.id const showProps = () =>{ console.log(props.row.id) } /////////////////// const removeRow = () =>{ console.log(idTable) // id Element let a = deleteRows.deleteRow(idTable) // non-work code } /////////////////// return( <li className = "item_li"> <Inputs valTable = {props}/> <Button onClick = {removeRow}>Delete</Button> </li> ) } export default Li;Puedes hacerlo así:
// import React from "react"; function App() { const [tableRows, setTableRows] = React.useState([ { id: Date.now(), firstName: "lorem", secondName: "lorem", lastName: "lorem", }, ]); const addNewRow = () => { const newRow = { id: Date.now(), firstName: Math.random(), secondName: "", lastName: "", }; setTableRows([...tableRows, newRow]); }; function deleteRow(id) { setTableRows(tableRows.filter((row) => row.id !== id)); } return ( <div className="App"> <button onClick={addNewRow}> Add</button> {tableRows.map((row) => ( <Li row={row} key={row.id} deleteRow={deleteRow} /> ))} </div> ); } // export default App; const Li = ({ row, deleteRow }) => ( <li className="item_li"> <div>firstName: {row.firstName}</div> <button onClick={() => deleteRow(row.id)}>Delete</button> </li> ); ReactDOM.render(<App />, document.getElementById('root')); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="root"></div>En App.js está pasando argumentos como este: <Li row={row} key={id} deleteRows = {deleteRow} />
Y en Li.js espera argumentos posicionales como este: function Li(props, deleteRows)
Pero no es así como React pasa los accesorios, echa un vistazo a esta guía de la documentación sobre accesorios.
Desea cambiar el código en Li.js en lugar de esto:
function LI(props) { ... const removeRow = () =>{ console.log(idTable) // id Element let a = props.deleteRows(idTable) // non-work code } ... }