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>

);

Answer 1

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.