How do I implement a dynamic checkbox in ReactJS?

Question

I am making a Discord Embed Builder and so far everything is working as expected except the checkbox. I would like to know how to make a dynamic checkbox in React where for each field it can be selected as either inline or not. The module I am using to display the embeds is embed-visualizer

Basically, I have made it so that the inputs can be added and removed by clicking the add and remove buttons. With the Title and Value data entered into the inputs, it will dynamically be added to the embed fields object.

The problem I am experiencing is the checkbox where currently, it is stuck on checked (true) in the useState hook and what I want it to do is for each field added, what it should do is when checked, set the "inline" to true or false when unchecked.

Here is my code:

const [inputList, setInputList] = useState([{ name: "Title", value: "Value", inline: true }]);

// handle input change
const handleInputChange = (e, index) => {
    const { name, value } = e.target;

    const list = [...inputList];

    list[index][name] = value;

    setInputList(list);
};

// handle click event of the Remove button
const handleRemoveClick = index => {
    const list = [...inputList];
    list.splice(index, 1);
    setInputList(list);
};

// handle click event of the Add button
const handleAddClick = () => {
    setInputList([...inputList, { name: "Title", value: "Value", inline: true }]);
};

let embed = {
    embed: {
        fields: inputList
    }
};

return (
    <div>

        <label className="form-label"><span className="text-danger">*</span> Fields</label>
        <MDBRow>
            {inputList.map((x, i) => {
                return (
                    <MDBCol size="sm">
                        <div style={{ paddingBottom: "5px" }}>
                            <input className="form-control" name="name" placeholder="Field Name" value={x.name} onChange={e => handleInputChange(e, i)} />
                        </div>
                        <div style={{ paddingBottom: "5px" }}>
                            <input className="form-control" name="value" placeholder="Field Value" value={x.value} onChange={e => handleInputChange(e, i)} />
                        </div>
                        <div className="custom-control custom-checkbox">
                            <input type="checkbox" className="custom-control-input" name="inline" checked={x.inline} onChange={e => handleInputChange(e, i)} />
                            <label className="custom-control-label">Inline</label>
                        </div>
                        <div className="btn-box">
                            {inputList.length - 1 === i && <button className="btn btn-success btn-sm" onClick={handleAddClick}>Add</button>}
                            {inputList.length !== 1 && <button className="btn btn-danger btn-sm" onClick={() => handleRemoveClick(i)}>Remove</button>}
                        </div>
                    </MDBCol>
                );
            })}
        </MDBRow>
        <br></br>
    </div>

);

Domino987 · Accepted Answer · 2021-03-30 13:50:45Z

3

You could pass an optional third parameter with e => handleInputChange(e, i, e.target.checked)} in the checkbox.

and access it with:

const handleInputChange = (e, index, customVal) => {
    const { name, value } = e.target;

    const list = [...inputList];

    list[index][name] = customVal!== undefined ? customVal: value;

    setInputList(list);
};

Here is a sandbox.

answered Mar 30, 2021 at 13:50

Domino987

8,8642 gold badges17 silver badges40 bronze badges

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

2 Comments

NTM Nathan Over a year ago

Can confirm that this is the solution and it is working for me with normal checkboxes only. However if I use MDBReact, it will not work: (Please see mdbootstrap.com/docs/react/forms/checkbox)

Domino987 Over a year ago

Why? It should work. Can you create a sandbox where it does not work?

Collectives™ on Stack Overflow

How do I implement a dynamic checkbox in ReactJS?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related