So, I'm trying toggle the Icon based on the isBadData per email data in the object of array. But I can't seem to find out how could save it back to the state so it can update the Icon image in LeadProfileComponent.

This is what it looks like:

checkIcon = isBadData: false
crossIcon = isBadData: true

Heres my code:

 // ModalComponent.js
 const [leadProfile, setLeadProfile] = useState([
  {
    id: 'd114877b-074b-4aa2-a3f0-3b9446885336',
    firstName: 'wqe',
    lastName: 'wqe',
    name: 'wqe wqe',
    email: [
      {
        type: 'personal',
        address: '[email protected]',
        valid_since: '2010-05-09',
        isBadData: true,
      },
      {
        type: 'personal',
        address: '[email protected]',
        valid_since: '2017-03-09',
        isBadData: true,
      },
      {
        type: 'personal',
        address: '[email protected]',
        valid_since: '2009-01-12',
        isBadData: true,
      },
    ],
  },
]);

<LeadProfileComponent leadProfile={leadProfile} setLeadProfile={setLeadProfile} />


// LeadProfileComponent.js
const LeadProfileComponent = (props) => {
  const handleChildEmail = (email, index) => {
    props.setLeadProfile((prev: any) => {
      const value = { ...prev[0].email[index] };
      console.log('inside value');
      console.log(value);
      value.isBadData = !value.isBadData;

      console.log(value);
      // return prev;
      return [value];
    });
    console.log('props.leadProfile');
    console.log(props.leadProfile);
  };
  return (
    <>
      {
        props.leadProfile.map((lead, index) => (
          return(
      <>
        {lead.email.map(() => {

          return (
            <button
              id="btnCheck"
              onClick={() => {
                handleChildEmail(email, index);
              }}
            >
              <img
                src={
                  email.isBadData !== true
                    ? checkIcon
                    : closeIcon
                }
              />
            </button>
          )
        })}
      </>
      )
    }
    </>
  );
}

Heres what it looks like when you console log inside of handChildEmail function:

As you can see, I was able to change the inside boolean of email[0], but I cant save it back to the leadProfile state since I have a missing part in the destructuring part

CodePudding user response：

Break your components in smaller parts, and manage each email individually

• LeadProfileEmailComponent.js

const LeadProfileEmailComponent = ({ initialEmailData, ...props }) => {

    const [emailData, setEmailData] = useState(initialEmailData);
   
    return (
        <button
            id="btnCheck"
            onClick={() => {
                setEmailData({
                    ...emailData,
                    isBadData: !emailData.isBadData
                });
            }}
        >
            <img
                src={
                    emailData.isBadData !== true
                        ? checkIcon
                        : closeIcon
                }
             />
        </button>
    )
}

Change this in LeadProfileComponent:

{lead.email.map((email) => {
    return (
        <LeadProfileEmailComponent initialEmailData={email} />
    )
})}

The downside is, the state of the parent component will not be updated. However this is standard design pattern practise, you should not rely on the parent component data for this.