checkbox is not checked reactjs

Question

I have a checkbox. If the checkbox is checked, the form check should checked. But it doesn't work for me. I have the following code:

import React, { useState } from 'react'
import { Row, Form, Container } from 'react-bootstrap'
import subMenu from '../subMenu.js'

function TestScreen() {
const [test1, setTest1] = useState(subMenu)
const subMenuHandler = (e) => {
    let sMenu = test1
    sMenu.forEach(sm => {
        if (sm._id === Number(e.target.value))
            sm.isChecked = e.target.checked
    })
    setTest1(sMenu)
}

this is my form:

return (
    <Container fluid>
        <Row className="mx-xs-auto">
            <Form>
                <div key='default-checkbox' className="mb-3" >
                    {test1.map(sm => (
                        <Form.Check
                            type="checkbox"
                            id={sm._id}
                            label={sm.nama}
                            key={sm._id}
                            value={sm._id}
                            checked={sm.isChecked}
                            onChange={subMenuHandler}
                        />
                    ))}
                </div>
            </Form>
        </Row>
    </Container >
)

the stat isChecked is successfully change to true, but the formcheck not change to checked,

this is my data:

const subMenu = [
{
    _id: 1,
    nama: 'submenu-1',
    category: 'Electronics',
    harga: 89.99,
    id_menu: 1,
    isChecked: false
},
{
    _id: 2,
    nama: 'submenu-2',
    category: 'Electronics',
    harga: 89.99,
    id_menu: 1,
    isChecked: false
},
{
    _id: 3,
    nama: 'submenu-3',
    harga: 599.99,
    id_menu: 2,
    isChecked: false
},

]

in the state isChecked has change to true, So where i have wrong? I don't undersanding...

Answer 1

Instead of let sMenu = test1, do , let sMenu = [...test1]

Make a copy of your state before updating it so that react can detect that new object reference is available for it to trigger a re-render.

In earlier way you're just pointing to same object (array is also an object) using different variable name.

Also get more understanding of primitives and non-primitives in JS before a deeper dive into any UI framework. Another important concept would be shallow vs deep copying when it comes to object.