Empty object is assigning to the array of state object in functional component-CodePudding

need to update state and assign to an array,and i need to print the array of objects on click of the addrow button ,below is the code snippet

import React, { useState, useRef } from "react";

export default function FunctionalPointsTable() {
  const [teamName, setTeamName] = useState();
  const [killPoints, setKillPoints] = useState();
  const [placePoints, setPlacePoints] = useState();
  const [chickenDinner, setChickenDinner] = useState();
 
  const [tableData, setTableData] = useState([
    {
      teamName: "",
      killPoints: "",
      placePoints: "",
      chickenDinner: "",
    },
  ]);

  const [tableValues, setTableValues] = useState([]);

  const handleChange = (e) => {
    //const name = e.target.name
    //const value = e.target.value
    const { name, value } = e.target;
    // console.log(value)

    if (name === "teamName") {
      setTeamName(value);
    } else if (name === "chickenDinner") {
      setChickenDinner(value);
    } else if (name === "killPoints") {
      setKillPoints(value);
    } else if (name === "placePoints") {
      setPlacePoints(value);
    }
  };

i want to send the object to the tableData array in the state along with previous values from individual states,iam not able to understand how to acheive this I tried so many methods but not getting the required result,in console.log i need the below format tableData:[{ teamName: "", killPoints: "", placePoints: "", chickenDinner: "", },{ teamName: "", killPoints: "", placePoints: "", chickenDinner: "", },{ teamName: "", killPoints: "", placePoints: "", chickenDinner: "", }...] ,at first click i was getting an empty object , below is the function to add the data to array in the state

const addData = () => {
    let data = {
      teamName: teamName,
      killPoints: killPoints,
      placePoints: placePoints,
      chickenDinner: chickenDinner,
    };
    console.log(data);
    setTableData([...tableData, data]);
    console.log("Table Data Array", tableData);
    // reset();
  };

  return (
    <div className="col-12">
      <input
        name="teamName"
        onChange={handleChange}
        className="p-2 mb-3 mr-1"
        placeholder="Team Name"
        value={teamName}
        // ref = {teamNameRef}
      />
      <input
        name="killPoints"
        onChange={handleChange}
        className="p-2 mb-3 mr-1"
        placeholder="Kill Points"
        value={killPoints}
        // ref = {killPointsRef}
      />
      <input
        name="placePoints"
        onChange={handleChange}
        className="p-2 mb-3 mr-1"
        placeholder="Place Points"
        value={placePoints}
        // ref = {placePointsRef}
      />
      <input
        name="chickenDinner"
        onChange={handleChange}
        className="p-2 mb-3 mr-1"
        placeholder="Chicken Dinner"
        value={chickenDinner}
        // ref = {chickenDinnerRef}
      />
      <button className="btn btn-primary" onClick={addData}>
        Add Row
      </button>
    </div>
  );
}

help me to get the solution for this ,thanks in advance

CodePudding user response：

your code logic is correct but first thing first there is no need to initialize the tableData state with the empty object since you are not updating the object but pushing new items to the array, so the tableDate state will be:

  const [tableValues, setTableValues] = useState([]);

now for your problem, there is no real problem, you are consoling the state while it's updating and you will not see the new state immediately because the state update is an asynchronous operation. if you added a console.log outside any function you will see the updated state.

here is a link for modified code

CodePudding user response：

React state does not immediately updates so please if you want to view immediate results in console.log so you have to update the code as follows and you have to assign new data to the variable and console.log them to view immediate effect as you are using tableData in console.log which does not update immediately:

const addData = () => {
let data = {
  teamName: teamName,
  killPoints: killPoints,
  placePoints: placePoints,
  chickenDinner: chickenDinner,
};
console.log(data); // this will print your data accurately
let newData=[...tableData, data];
setTableData(newData);
console.log("Table Data Array", newData);
// reset();
};