How to add all objects data in an empty array?

Question

In a React project, I want to club certain records into an empty array, to pass into some function. So, on check of checkbox component I'm able to get the id of the record which I want to compare it with the array of data. My concern is to push all the checked records to newly created empty array, to pass it to some function. I have gone through various posts but, didn't get any satisfactory result. Please refer to the following code.

const newAllData = [{testId:123, dataId:"44", cycleId:"5050", asset:"N"},
{testId:323, dataId:"54", cycleId:"6660", asset:"N"},
{testId:444, dataId:"44", cycleId:"4340", asset:"Y"},
{testId:134, dataId:"40", cycleId:"5150", asset:"N"},
{testId:222, dataId:"42", cycleId:"5050", asset:"Y"},
{testId:552, dataId:"38", cycleId:"3244", asset:"Y"},
]

const [newArray, setNewArray] = useState([])

// Here I get id of the reocord checked
const getArray = (id) => { 
    
    //Here I find that particular record from data above
    const newObj = newAllData?.find(d => d.testId == id);

    var arrayData = [];
    arrayData.push(...newObj);
    setNewArray(arrayData)
  }

  console.log("NEW ARRAY", newArray)
  return <>
  <CheckboxComp getArrayData={getArray} />
  </>;

Here only one record is populating in the newArray. What is the right approach to get all the records.

setNewArray([...newArray ,...arrayData]), ,try this in your function — Mr.Developer
– Mr.Developer, Commented Aug 4, 2022 at 11:37

Andy · Accepted Answer · 2022-08-04 12:09:44Z

When you set the state with the found object you need to include the previous state:

setNewArray([...newArray, found]);

BUT: you also need to include a condition based on whether the box is checked on or not. If it's checked add it to the state as above. If it's not checked filter it from the newArray state.

const { useEffect, useState } = React;

// Pass in some data
function App({ data }) {

  // Set the state
  const [ newArray, setNewArray ] = useState([]);

  function handleChange(e) {

    // Get `value` and `checked` from the box
    const { value, checked } = e.target;
    
    // If the box is checked add it to the state
    // Note: we coerce the value to a number from a string
    // because we use a equality check `===`, and the value of
    // `testId` is a number
    if (checked) {
      const found = data.find(obj => obj.testId === +value);
      if (found) setNewArray([...newArray, found]);
    }
    
    // If the box is not checked remove it from the state
    if (!checked) {
      const filtered = newArray.filter(obj => obj.testId !== +value);
      setNewArray(filtered);
    }
  
  }

  // Log the change in state for clarification
  useEffect(() => {
    console.log(JSON.stringify(newArray));
  }, [newArray]);

  return (
    <div>
      <CheckboxComp
        data={data}
        handleChange={handleChange}
      />
    </div>
  );

}

function CheckboxComp({ data, handleChange }) {
  return (
    <div>
      {data.map(obj => {
        const { testId } = obj;
        return (
          <label for={testId}>
            {testId}
            <input
              name={testId}
              type="checkbox"
              value={testId}
              onChange={handleChange}
            />
          </label>
        );
      })}
    </div>
  )
}

const data=[{testId:123,dataId:"44",cycleId:"5050",asset:"N"},{testId:323,dataId:"54",cycleId:"6660",asset:"N"},{testId:444,dataId:"44",cycleId:"4340",asset:"Y"},{testId:134,dataId:"40",cycleId:"5150",asset:"N"},{testId:222,dataId:"42",cycleId:"5050",asset:"Y"},{testId:552,dataId:"38",cycleId:"3244",asset:"Y"}];

ReactDOM.render(
  <App data={data} />,
  document.getElementById('react')
);

body { font-size: 1.1em; }
label { margin-right: 0.5em; padding: 0.2em; }
label:hover { background-color: #ffffa0; }
[type="checkbox"]:hover { cursor: pointer; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Moein Moeinnia · Accepted Answer · 2022-08-04 11:25:11Z

0

You can easily make and array from object with Array.from() method :

Array.from(object, (element, index) => { /* … */ } )

answered Aug 4, 2022 at 11:25

Moein Moeinnia

2,4364 gold badges15 silver badges27 bronze badges

Comments

Mr.Developer · Accepted Answer · 2022-08-04 11:25:32Z

0

please assign var arrayData = []; in outside the getArray function

answered Aug 4, 2022 at 11:25

Mr.Developer

6054 silver badges8 bronze badges

Comments

Faizan · Accepted Answer · 2022-08-04 11:31:38Z

0

Your are using find in getArray function which returns only the first element in the provided array. Try using filter. Documentation for find

answered Aug 4, 2022 at 11:31

Faizan

94 bronze badges

Comments

wingsico · Accepted Answer · 2022-08-04 11:32:19Z

0

try this:

const getArray = (id) => {
  const checkedItem = newArray.find(item => item.testId === id);
  let targetArr = [];
  if (checkedItem) {
    targetArr = newArray.filter(item => item.testId !== id);
  } else {
    targetArr = [...newArray, checkedItem]
  }
  setNewArray(targetArr)
}

answered Aug 4, 2022 at 11:32

wingsico

964 bronze badges

Collectives™ on Stack Overflow

How to add all objects data in an empty array?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related