Delete item from table React-CodePudding

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;

CodePudding user response：

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
    }
...
}

CodePudding user response：

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>