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;
You can do it like this:
// 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>In App.js you are passing in args like this:
<Li row={row} key={id} deleteRows = {deleteRow} />
And in Li.js you are expecting positional args like this:
function Li(props, deleteRows)
But that is not how React passes props around, take a look at this guide from the documentation on props.
You want to change the code in Li.js instead to this:
function LI(props) {
...
const removeRow = () =>{
console.log(idTable) // id Element
let a = props.deleteRows(idTable) // non-work code
}
...
}