How to properly change the boolean inside of object in array?

Question

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

Bruno Polo · Accepted Answer · 2022-05-23 18:50:39Z

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.

Collectives™ on Stack Overflow

How to properly change the boolean inside of object in array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related