I want to update my array's object. on button click-CodePudding

This is my App.js

How I change my array's object when click on button called "changer" and add newArr called "absent"

function App() {
  const [tables, setTables] = useState([
    { no: '1', name: 'Zameer', period: "Urdu" },
    { no: '2', name: 'Zaka', period: "English" }
  ])
  const changer = () => {
    setTables([...tables, { newArr: 'absent' }])
    
  }
const newArray = setTables



  return (
    <div className='container'>
      <Tablee tables={tables} newArray ={newArray} />
      <Button onClick={changer} >absent</Button>
    </div>
  );
}

This is my tablee.jsx component How I change my array's object when click on button called "changer" and add newArr called "absent" Please Help me out

const table = ({ tables, newArray }) => {
    return (
        <>
            <Table striped bordered hover>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>First Name</th>
                        <th>Period</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        tables.map((table) => (
                            <tr>
                                <td>{table.no}</td>
                                <td>{table.name}{table.newArray} </td>
                                <td>{table.period}</td>
                            </tr>

                        ))
                    }

                </tbody>
            </Table></>
    )
}

CodePudding user response：

You overcomplicated this

function App() {
  const [tables, setTables] = useState([
    { no: '1', name: 'Zameer', period: "Urdu" },
    { no: '2', name: 'Zaka', period: "English" }
  ])
  const changer = () => {
    setTables([...tables, { no: tables.length, name: 'absent' }])
  }

  return (
    <div className='container'>
      <Tablee tables={tables} newArray ={newArray} />
      <Button onClick={changer} >absent</Button>
    </div>
  );
}

CodePudding user response：

I am not sure what you are trying to achieve with this but if you just want to add a new row on button click and print "newArr" value, you need to modify this line:

<td>{table.name}{table.newArray} </td>

<td>{table.name}{table.newArr} </td>

Working code: https://codesandbox.io/s/mutable-sun-cnlu3w?file=/src/App.js