Adding Id attribute to multiple checkboxes

Question

ISSUE: Id attributes is applied to all elements.

Request: I am trying to add id attribute to an element that consists of 3 checkbox, but i'm not sure how to do that. I tried to add it to the main one but it applied to all.

Here is my full step.

import GTM from "/components/gtm"

 offerHelp: {
    prefix: "OFS",
    volunteer: "_VO",
    donor: "_DI",
    orgbtn: "_ORG",
  },

const Step1 = (props) => {
  const [state, updateState] = useState(STEP_1_STATE);
  const { answers, none } = state;

  const toggleAnswer = (answer) => {
    const updatedAnswers = { ...answers, [answer]: !answers[answer] };
    const checkedAnswers = getCheckedAnswers(updatedAnswers);
    updateState({ ...state, answers: updatedAnswers });
    props.update("providers", checkedAnswers);
  };

  return (
    <WizardStep>
      <WizardProgress className="text-primary">
        Question {props.currentStep}/{props.totalSteps}
      </WizardProgress>
      <StepTitle>How do you want to contribute?</StepTitle>
      <WizardFormWrapper>
        <WizardCheckboxWrapper>
          {Object.entries(answers).map(([answer, checked], i) => (
            <WizardCheckboxItem
              key={i}
              id={
                GTM.offerHelp.volunteer +
                props.currentStep +
                GTM.offerHelp.orgbtn +
                GTM.offerHelp.donor //this is the id where i need to fix. currently its not giving the three elements different ids. They are all the same
              }

              onChange={() => toggleAnswer(answer)}
              checked={!none && checked}
              text={answer}
            />
          ))}
        </WizardCheckboxWrapper>
      </WizardFormWrapper>
    </WizardStep>
  );
};

Artur · Accepted Answer · 2020-07-08 02:23:06Z

1

Will using the i counter to compose your unique id be enough?

{
  GTM.offerHelp.volunteer +
  props.currentStep +
  GTM.offerHelp.orgbtn +
  GTM.offerHelp.donor +
  i
}

answered Jul 8, 2020 at 2:23

Artur

3635 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ace_Li Over a year ago

I think that worked. Look the picture I just added above. let me know if that will work?

Ace_Li Over a year ago

looks like i cant add a picture, however, I got these results now _VO1_ORG_DI0 _VO1_ORG_DI1 _VO1_ORG_DI2

Artur Over a year ago

It does work, yes. The ids are unique because of the suffix from i. I edited your post, the image was lost bellow, because you didn't close the code block

Ace_Li Over a year ago

You're Awesome. Thank you for your help :)

Sweet Chilly Philly · Accepted Answer · 2020-07-08 02:31:36Z

1

I suggest putting this into a function that returns a string and then use the string as the ID value.

GTM.offerHelp.volunteer +
props.currentStep +
GTM.offerHelp.orgbtn +
GTM.offerHelp.donor

I am under the impression that your ID is not unique. Please add something like an index that will make this unique

edited Jul 8, 2020 at 2:31

answered Jul 7, 2020 at 21:10

Sweet Chilly Philly

3,2372 gold badges31 silver badges43 bronze badges

4 Comments

Ace_Li Over a year ago

For sure will do that. However, I still have an issue with the id above as it still not working. Any suggestion how to change it to work for the three checkboxes?

Sweet Chilly Philly Over a year ago

@Ace_Li I have edited my answer, please make your ID unique

Ace_Li Over a year ago

Thank you for help. I just added an index i to increment by 1

Sweet Chilly Philly Over a year ago

Perfect! :) don't forget to upvote, and select as the answer. Happy to have helped you

Collectives™ on Stack Overflow

Adding Id attribute to multiple checkboxes

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related