score:3

Accepted answer 
const [list, setList] = useState(data); // <-- (1) parent state passed as prop

// edits the data
const handleClick = (item) => {
  setList(list => list.map(el => { // <-- (2) array.map shallow copy
    if (el.payerName === item.payerName) {
      return {
        ...el, // <-- (3) shallow copy array element
        state: [...el.state, state.value], // <-- (4) shallow copy array
        isActive: !el.isActive, // <-- new property
      };
    }
    return el; // <-- not updating, just return current element
  }));
};

score:0 

    const handleClick = (item) => {
        let MyList = [...newList]

        # this is brcause you are using map. So first push the data in MyList and then setState your newList, so that child component can re-render 
        
        MyList.forEach((el) => {
          if (el.payerName === item.payerName) {
            el.state.push(state.value);
            if (!el.isActive) {
              el.isActive = true;
            }
          }
        });

     # also include this
     setNewList(MyList) 

    setUpdate([...update, item]);

}

score:0 

const handleClick = (item) => {
  const payer = list.find(el => el.payerName === item.payerName);
  payer.state.push(state.value);
  payer.isActive = true;

 setUpdate([...update, item]);
}

score:0 

function EditInsurance(props) {
  const [parentData, setParentData] = useState([._cloneDeep(props.data))]);
  ...
}

score:0 

//sets the data onLoad
useEffect(() => {
   setList(JSON.parse(JSON.stringify(data)));
}, []);

score:0 

const [data, setData] = useState([]);
const [editing, setEditing] = useState(null);

{!!editing && (
        <EditInsurance state={editing} data={[...data]} setEditing={setEditing} />
)}

score:1 

function EditInsurance(props) {
  const [parentData, setParentData] = useState([...props.data]);
  ...
}

Related Query

More Query from same tag