Is there any function to use to see the new updated array state using React Js Hook?

Question

I have question pertaining to use of Effect Hook, Right now I have module when I click the button it will automatically add 5 new array so each row has onChange this is probably working now. However when I console log the state still no effect but in my view has already effect.

Problem: Why my state still 5 but my rows on my table already 10..

Here is the sample output:

As you can see I have already 10 because I already add new rows but in default 5 rows only. but when I console it logs inside of my onchange handler the state has only 5, there is no reflection happen when I console logs the state.

Based on my research I need to use React Hook Effects, But how to do it in Hooks Effect? I will show you guys my sample code that I created.

Here is the default 5 default state:

    const [data, setData] = useState([{
      key: "1",
      customer: ,
      bank: ,
      branch:  handleInputChange(e,0)}/>,
      checkNo:  handleInputChange(e,0)}/>,
      checkDate:  handleInputChange(e,0)}/>,
      amount:  handleInputChange(e,0)} 
              />,
      remarks: ,
      
  },
  {
    key: "2",
    customer: ,
    bank: ,
    branch:  handleInputChange(e,1)}/>,
    checkNo:  handleInputChange(e,1)}/>,
    checkDate:  handleInputChange(e,1)}/>,
    amount:  handleInputChange(e,1)} 
            />,
    remarks: ,
  },
  {
    key: "3",
    customer: ,
    bank: ,
    branch:  handleInputChange(e,2)}/>,
    checkNo:  handleInputChange(e,2)}/>,
    checkDate:  handleInputChange(e,2)}/>,
    amount:  handleInputChange(e,2)} 
            />,
    remarks: ,
  },
  {
    key: "4",
    customer: ,
    bank: ,
    branch:  handleInputChange(e,3)}/>,
    checkNo:  handleInputChange(e,3)}/>,
    checkDate:  handleInputChange(e,3)}/>,
    amount:  handleInputChange(e,3)} 
            />,
    remarks: ,
  },
  {
    key: "5",
    customer: ,
    bank: ,
    branch:  handleInputChange(e,4)}/>,
    checkNo:  handleInputChange(e,4)}/>,
    checkDate:  handleInputChange(e,4)}/>,
    amount:  handleInputChange(e,4)} 
            />,
    remarks: ,
    }]) 

  

    const [list, setList] = useState(data);

Button Where when I click this it will add new 5 rows:

AddRows Function:

const addRows = () => {

    //loop here the keys listed
    let initialKey = 0;

    const x = data.slice(-1);

    initialKey = parseInt(x[0]['key']);

    let newArr=[...Array(5)].map((_,i)=>{

        let val=i + 1 +initialKey;

         return {
            key: ""+val+"",
            customer: ,
            bank: ,
            branch:  handleInputChange(e,val)}/>,
            checkNo:  handleInputChange(e,val)}/>,
            checkDate:  handleInputChange(e,val)}/>,
            amount:  handleInputChange(e,val)} 
                    />,
            remarks: 
         }
    });

    setData([...data,...newArr])

}

Here is function of OnChange

const handleInputChange = (e, i) => {

    console.log(i);

    const { name, value } = e.target;

    const list = [...data];

    console.log(list);
    
    const x = list[i];

    // const x = list[i][name] = value;

    console.log(x)
    
}

Output Onchange: Based on the logs the state is 5 only.

user_7344164 · Answer

You can try this:

useEffect(() => {

      setTimeout(()=>{
       setData(yourDataArray)
      }, 1000)

    }, [])

user_10460992 · Answer

useEffect(() => {
// this will get run whenever `data` changes
console.log("data" , data)
}, [data])

A question for you: Why did you put your UI inside the state?

Is there any function to use to see the new updated array state using React Js Hook?

2 Answers