React Checkbox not updating in functional component

Question

Here is my functional component: (Link to reproduce)

import React, { useState } from "react";
import Aux from "../../../../../../hoc/Auxilary/Auxilary";
const DropDownContainer = (props) =>
{
    const CheckedArray = Array(props.Data.length);
    for(let i = 0; i< CheckedArray.length; i++)
    CheckedArray[i] = false;
    const [Selected, setSelected] = useState({
        filterName: props.Name,
        filterObjects: props.Data,
        checked: CheckedArray.slice(),
        multiSelectAllowed: false,
    });
    const propsStructure = props.Data.map((elem, index) => (
        {
            title: elem,
            isSelected: false,
            id: index,
            key: "DropDown "+index,
            checkboxStyle: {
                width:"20%",
            },
            contentStyle: {

                width: "80%",


            }

        }
    
    ));

    const CheckBoxHandler = (index) =>
    {
        const newSelection = Selected;
        if(!Selected.multiSelectAllowed)
        {
            
            newSelection.checked.forEach((_,ind) => (newSelection.checked[ind] = false));
        }
            newSelection.checked[index] = !newSelection.checked[index];
        setSelected(newSelection);
        console.log(Selected.checked[index]);
        console.log(Selected.checked);

    }

    const PropDiv = propsStructure.map((elem) => {
        return <div className = "CheckBoxRow" key ={elem.key}>
                        <input 
                        style = {elem.checkboxStyle} type = "checkbox" checked = {Selected.checked[elem.id]}
                        onChange = {() => {CheckBoxHandler(elem.id)}}
                        />
                        <div style = {elem.contentStyle}>{elem.title}</div>
                </div>
    });

    return(
        <Aux>
                <div className = "Boxing">
                {PropDiv}
                </div>
        </Aux>
    );
}

export default DropDownContainer;

/*
from
props = ["a","b","c"]
to 

propsStructure = [
    {
        title:,
        isSelected:,
    }
]
*/

As per my code... when I print Selected.checked the value gets updated correctly. But it doesn't reflect in checkbox of the UI. As you can see here:

Can anyone point out the way to solve this? Here is the link to reproduce. As you can see in the console, the values are updating correctly but in my checkbox, it takes the initial value which is passed at the beginning which is false in this case and so despite me trying to check it, it always remains unchecked.

A.R.SEIF · Accepted Answer · 2020-10-16 08:08:14Z

2

i am change code .

import React, { useState } from "react";
const DropDownContainer = (props) => {
  const CheckedArray = Array(props.Data.length);
  for (let i = 0; i < CheckedArray.length; i++) CheckedArray[i] = false;
  const [Selected, setSelected] = useState({
    filterName: props.Name,
    filterObjects: props.Data,
    checked: CheckedArray.slice(),
    multiSelectAllowed: false
  });
  const propsStructure = props.Data.map((elem, index) => ({
    title: elem,
    isSelected: false,
    id: index,
    key: "DropDown " + index,
    checkboxStyle: {
      width: "20%"
    },
    contentStyle: {
      width: "80%"
    }
  }));

  const CheckBoxHandler = (index) => {
    let newSelection = { ...Selected };

    newSelection.checked[index] = !newSelection.checked[index];
    setSelected(newSelection);
    console.log(Selected.checked[index]);
    console.log(Selected.checked);
  };

  const PropDiv = propsStructure.map((elem) => {
    return (
      <div className="CheckBoxRow" key={elem.key}>
        <input
          style={elem.checkboxStyle}
          type="checkbox"
          checked={Selected.checked[elem.id]}
          onClick={() => {
            CheckBoxHandler(elem.id);
          }}
        />
        <div style={elem.contentStyle}>{elem.title}</div>
      </div>
    );
  });

  return (
    <div>
      <div className="Boxing">{PropDiv}</div>
    </div>
  );
};

export default DropDownContainer;

/*
from
props = ["a","b","c"]
to 

propsStructure = [
    {
        title:,
        isSelected:,
    }
]
*/

**Working Demo:**

answered Oct 16, 2020 at 8:08

A.R.SEIF

8731 gold badge8 silver badges28 bronze badges

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

3 Comments

A.R.SEIF Over a year ago

Tell me if there is a problem, otherwise do not forget the vote

Shivam Sahil Over a year ago

This solution does work... just a quick question what change did you make exactly?

A.R.SEIF Over a year ago

thanks.ok.change onChange to onClick .and change function CheckBoxHandler

Collectives™ on Stack Overflow

React Checkbox not updating in functional component

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related