I create a table so you can add and remove items. Deletion as far as I understand needs to be done through the .filter() for the unique id of each item I apply Date.now(). The problem is that I can not pass the value of the id from the child(Li) element to the parent(App). React constantly shows the error that deleteRow is not a function. As if I understand that it is a parameter but how then can it be called. Thank you to everyone who responds !!!
App.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;
