Create dynamic amount of selectable checkboxes with dynamic variables

Question

This is a standard working checkbox:

const [myValue1, setMyValue1] = React.useState(true);

<InputCheckbox
 label="Registry"
 value={myValue1}
 onChange={(value, name) => {
 setMyValue1(value);
 console.log(`${name}:${value}`);}}
/>

Now I create a lot of checkboxes like this:

{someTools.map(({ title }) => (
    <>

    <InputCheckbox
     label={title}
     value={false} <- Current Placeholder
     onChange={(value, name) => { ...? }}
    />

))}

As you can see, in the current state, I can not check or uncheck my checkboxes because I am missing the const [myValue / setMyValue1] for every checkbox in my .map function.

How can I dynamically create those variables and use them in my onChange function?

Kenny · Accepted Answer · 2022-10-30 09:54:34Z

1

Assuming each tool's title is unique, i'd store the checked values in an object like this:

{ [title]: <isChecked> }

Further assuming that we already know tools when rendering (we don't fetch them in this function), the useState call could look like this:

const [checked, setChecked] = React.useState(
    Object.fromEntries(someTools.map(({title}) => [title, false]))
);

false being the initial checked value. (If you fetch the tools in this component, you should initialize useState with {})

Last but not least, the JSX would look like this:

someTools.map(({title}) => 
    <InputCheckbox
        key={title}
        label={title}
        value={checked[title]}
        onChange={() => setChecked({...checked, [title]: !checked[title]})}
    />
)

answered Oct 30, 2022 at 9:54

Kenny

5204 silver badges13 bronze badges

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

1 Comment

JohnDole Over a year ago

thank you kenny. you helped me so much. makes sense!

Collectives™ on Stack Overflow

Create dynamic amount of selectable checkboxes with dynamic variables

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related