Toggle icons in react after iterating through Object and update the form

Question

I have a form with a social object, I want to add an icon to the social notification that has a boolean value and also want to toggle the icon and update the form.

      export default function UserProfile(props) {
              
          const form = useForm({
            initialValues: {
              name: props.userProfile.name,
              socials: {
                email: {        
                  notifications: true,
                },
               facebook: {
                  notifications:  false,
                },
               twitter: {
                  notifications:  false,
                },
              },
            },
         });
    
    return (

    <> 
             <form
                method="post"
                className="pt-5"
                key={props.userProfile.id}
                onSubmit={form.onSubmit(handleSubmit)}
              >
                    <TextInput
                      label="Name"
                      placeholder={props.userProfile.name}
                      {...form.getInputProps("name")}
                    />
                <Tabledata
                  socials={{ ...form.getInputProps("socials") }}
                  session={session}
                />
          <button type="submit">Save</button>
       </form>
     </>
    )             
 }

The table data component is :

function Tabledata({ socials }) {
  // console.log(socials.value["email"]["notifications"]);
  function ToggleButton() {
 const [isChecked, setIsChecked] = useState(true);

return isChecked? <CheckCircleIcon
                     className="h-6 w-6 text-green-500"
                     onClick={() => setIsChecked(!isChecked)}
                  /> 
                : <XCircleIcon
                      className="h-6 w-6 text-red-500"
                      onClick={() => setIsChecked(!isChecked)}
                   />
}

  return (
    <>
      <Table>
        <thead>
          <tr>
            <th>Social channel</th>
            <th>Notifications</th>
          </tr>
        </thead>
        <tbody>
          {Object.keys(socials.value).map((data, index) => (
            <tr key={index}>
              <td>{data}</td>
              <td>
                {socials.value[data]["notifications"]? (
                  <ToggleButton />
                ) : (
                 "Null"
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </>
  );
}

But I'm unable to toggle the value of the notification. How can I approach that? I was trying the above method and also I tried the below method, but not getting the desired result. I'm not sure how to do that.

function Tabledata({ socials }) {
          return (
    <>
      <Table>
        <thead>
          <tr>
            <th>Social channel</th>
            <th>Notifications</th>
          </tr>
        </thead>
        <tbody>
          {Object.keys(socials.value).map((data, index) => (
            <tr key={index}>
              <td>{data}</td>
              <td>
                {socials.value[data]["notifications"]? (
                  <CheckCircleIcon
                    className="h-6 w-6 text-green-500"
                     onClick={() =>
                      console.log(`change the notification to false`)
                    }
                  />
                ) : (
                  <XCircleIcon
                    className="h-6 w-6 text-red-500"
                    onClick={() =>
                      console.log(`change the notification to true`)
                    }
                  />
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </>
  );
}

Please leave you suggestions. I tried different StackOverflow suggestions but could not able to solve my problem.

Ahmad Faraz · Answer 1 · 2022-10-07T16:04:21.337

I refactored your code, I think you are on the right track, your mistake is that you are creating a function toggleButton and you call the function like a component <toggleButton />, I just updated your code . I hope it works.

function Tabledata({ socials }) {
  // console.log(socials.value["email"]["notifications"]);
  const [isChecked, setIsChecked] = useState(true);
  
  function toggleButton() {
    return isChecked ? (
      <CheckCircleIcon
        className="h-6 w-6 text-green-500"
        onClick={() => setIsChecked(false)}
      />
    ) : (
      <XCircleIcon
        className="h-6 w-6 text-red-500"
        onClick={() => setIsChecked(true)}
      />
    );
  }

  return (
    <>
      <Table>
        <thead>
          <tr>
            <th>Social channel</th>
            <th>Notifications</th>
          </tr>
        </thead>
        <tbody>
          {Object.keys(socials.value).map((data, index) => (
            <tr key={index}>
              <td>{data}</td>
              <td>
                {communications.value[data]["notifications"] ? (
                  <>{toggleButton()}</>
                ) : (
                  "Null"
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </>
  );
}

And if you want to make component, then you have to make the toggleButton func outside the TableData, as you can see the below code.

function ToggleButton() {
  const [isChecked, setIsChecked] = useState(true);
  return isChecked ? (
    <CheckCircleIcon
      className="h-6 w-6 text-green-500"
      onClick={() => setIsChecked(!isChecked)}
    />
  ) : (
    <XCircleIcon
      className="h-6 w-6 text-red-500"
      onClick={() => setIsChecked(!isChecked)}
    />
  );
}


function Tabledata({ socials }) {
  // console.log(socials.value["email"]["notifications"]);

  return (
    <>
      <Table>
        <thead>
          <tr>
            <th>Social channel</th>
            <th>Notifications</th>
          </tr>
        </thead>
        <tbody>
          {Object.keys(socials.value).map((data, index) => (
            <tr key={index}>
              <td>{data}</td>
              <td>
                {communications.value[data]["notifications"] ? (
                  <ToggleButton />
                ) : (
                  "Null"
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </Table>
    </>
  );
}

Thanks for the correction, but I am able to toggle the icon but the form is not updated. — Somdotta Sarkar, Oct 07 '22 at 16:17

Toggle icons in react after iterating through Object and update the form

1 Answers1