Getting undefined when adding input text values into array

Question

In a React project, I'm displaying certain records in a table which also has input text boxes for changing the values when needed. To process those changed records it needs to be added into an array, but, getting undefined when changed the values. Although each record is associated with unique id, unable to add in new array. Please refer to the code below.

const textChange = (data) => {
    const { id, value } = data;

    setDataNew((prevInfo) => {

      // Here the records are getting undefined and not getting added into array
      const dataIndex = id - 1;
      prevInfo[dataIndex] = value;
      return [...prevInfo];
    });
  };

Any suggestions and solution highly appreciated.

Please refer to code sandbox link for better clarity --> https://codesandbox.io/s/elated-varahamihira-xpjtdb?file=/src/Table.js:757-959

I want to add input text values in an array, with its unique id as its index... which can be seen in console — Prakash Patil
– Prakash Patil, Commented Sep 18, 2022 at 17:36

programoholic · Accepted Answer · 2022-09-18 17:46:27Z

0

If I understood it correctly here is what you need to do if you need all the records which got updated :

  const textChange = (data) => {
    const { id, value } = data;
    setDataNew((prevInfo) => {
      const newList = [...prevInfo];
      const index = newList.findIndex((datum) => datum.id === id);
      if (index !== -1) {
        newList[index] = { id, value };
      } else {
        newList.push({ id, value });
      }
      return [...newList];
    });
  };

Mistake in your code

You were getting undefined because you were calculating index like :

 const dataIndex = id - 1;

if the changed object id was 6708 , you were adding element at 6707th index. Hence all first 6706 element were showing up as undefined.

Link : working demo

answered Sep 18, 2022 at 17:46

programoholic

5,2545 gold badges26 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Prakash Patil Over a year ago

Perfect.... this is the expected answer... Thanks

Prakash Patil Over a year ago

Hello... can you please look into this stackoverflow.com/questions/73768945/… the issue is when input text is changed date data is undefined.... and it happens vice-versa

Collectives™ on Stack Overflow

Getting undefined when adding input text values into array

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related