How to display checkbox field name by fetching name from JSON object with React Code using material UI

JSON Response

JSON = [
{
"type": "checkbox",
"display": "OOS in water/to be rejected",
"key": "key2",
"value": "val1"
},
{
"type": "checkbox",
"display": "PMT micro pending",
"key": "key3",
"value": "val1"
},
{
"type": "checkbox",
"display": "Weight match confirmed",
"key": "key4",
"value": "val1"
},
{
"type": "input",
"display": "Comment",
"key": "key5",
"value": "val1"
},
{
"type": "button",
"display": "Submit",
"key": "key6",
"value": [
{
"type": "button",
"display": "OK",
"key": "key7",
"value": 'val3'
}
]
}
]

RenderCard.js Code

import { Button,Grid,Checkbox,TextField,Switch,Link, Input } from '@mui/material';
const KeysToComponentMap = {

grid: Grid,
button: Button,
checkbox: Checkbox,
input: TextField,
switch: Switch,
link: Link,
input: Input   
};



return (
{JSON.map((item, index) => {
                    console.log(item.type);
                    if (typeof KeysToComponentMap[item.type] !== "undefined") {        
                            return (
                                React.createElement(
                                    KeysToComponentMap[item.type],
                                    {
                                        onClick: () => { onButtonHandler(item, item.key) },
                                        variant: "contained"                                      
                                    },
                                    item.display &&
                                    (typeof item.display === "string"
                                    && item.display
                                    )
                                ))   
                    }
                })}
)

Output of this code displays checkbox and button correctly but Name is only displayed for button , not for the checkbox

Actual result of this code shown in the screenshot

Expected Result should be along with checkbox , check box name should display [for ex : "OOS in water/to be rejected" from the JSON("display": "OOS in water/to be rejected",) ]

Can you please help me with this.

Checking multiple Checkboxes works, but without the effect that checking each single checkbox has

In my demo below, checking single checkboxes has the desired effect to hide/show divs. Checking grouped checkboxes also works, but the checking here has no effect on hiding/showing the divs. I feel like my javascript code is missing just a minor fix for this to work, what I don't understand is: I thought I'm already checking for the state of the checkboxes, but why does nothing happen to the divs when multiple states of checkboxes are changed? Can you please help me find the solution?

"use strict"

// START TREEVIEW
let toggler = document.getElementsByClassName("caret1");
let dac;

for (dac = 0; dac < toggler.length; dac++) {
   toggler[dac].addEventListener("click", function () {
      this.parentElement.querySelector(".nested").classList.toggle("active");
      this.classList.toggle("caret1-down");
   });
}
// END TREEVIEW

// START CHECKBOX HIDE/SHOW SYNCHRONIZING

$(document).ready(function() {
    $(new Array(8).fill(1).map( (_, i) => i+1 )).each(function(idx, x) { // Array for the number of div elements
        
        $('#entry' + x)[($('#checkbox' + x).is(":checked")? "show" : "hide")](); // synchronize
        
        $('#checkbox' + x).change(function() {      // toggle on change     
           $('#entry' + x).toggle();
        });


        $.fn.nestedCheckboxes = function (stopPropogation) {
            this.addClass('nestedCheckboxes');
            this.click(nestedCheckboxHandler);
            this.delegate(':has( > input[type=checkbox])', 'click', nestedCheckboxHandler);
            function nestedCheckboxHandler (evt) {
                if ($(evt.target).is("input[type=checkbox]")) {
                    var parentContainer = $(this);
                    var checkbox = parentContainer 
                                    .find(' > input[type=checkbox]:eq(0)');
                    var parentCheckbox = parentContainer
                                            .parent()
                                            .closest(':has( > input[type=checkbox])')
                                            .children('input[type=checkbox]');
                
                    if (evt.target == checkbox[0]) {
                        $('input[type=checkbox]', parentContainer)
                            .prop("checked", checkbox.prop("checked"));
                    }
                    var parentCheckboxValue = !parentCheckbox
                                                .parent()
                                                .find("input[type=checkbox]")
                                                .not(parentCheckbox[0])
                                                .is("input[type=checkbox]:not(:checked)");
                
                    parentCheckbox.prop("checked",parentCheckboxValue);
                } else if (stopPropogation) {
                    evt.stopPropagation();
                }
            };
        };
         
        $(function () {
            $('div').nestedCheckboxes();
        });
   });
});

html, body {
    font-size:10px;
    font-family: Helvetica, sans-serif !important;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
}

.some-space {
  height:25px;
}

.checkbox-div,
.container-div {
  margin-left:25px;
}

.container-div {
  margin-top:70px;
}

#entry1,#entry3,#entry4,#entry5,#entry6,#entry7,#entry8{
  margin-top:10px;
  display: none;
}

.caret {
    cursor: pointer;
    user-select: none;
}

.caret-down::before {
    transform: rotate(90deg);
}

.caret::before {
    content: "\25B6";
    color: black;
    display: inline-block;
    margin-right: 7px;
}

.nested {
    display: none;
}

.active {
    display: block;
}

.label {
    color: #d4d4d4;
    font-weight: normal;
    font-size: 10px;
    text-align: center;
    line-height: 1;
    width: 100% !important;
    height: auto;
    text-overflow: ellipsis;
    overflow: hidden;
}

.label.a:hover {
    opacity: 1 !important;
}


.sidebarContent {
  margin-left: 20px;
}
.wrapMyUL,
.wrapMyUL2 {
    line-height: 1.9em;
    height: auto;
    animation-name: modalbox;
    animation-duration: .4s;
    overflow-y: scroll;
    overflow-x: scroll;
}

.wrapMyUL{
    margin-top: 1px;
}


ul,
#myUL2 {
    list-style-type: none;
}

#myUL2 a {
    color: #c8c8c8;
}

#myUL2 {
    height: auto;
    line-height: 1.9em;
    animation-name: modalbox;
    animation-duration: .4s;
}

#myUL2 li {
    min-width: 200px;
}

/* Main Level */
ul {
    margin-left: -20px;
}
ul#myUL2 {
    padding:0px 0px 0px 20px;
}



ul.nested.active span.caret2::before,
ul.nested.suboption.active span.caret1 {
    padding-left: 5px;
}

ul.nested.active span.caret2::before,
ul.nested.suboption.active span.caret2::before {
    display: none;
}

ul.nested.active span.caret2,
ul.nested.suboption.active span.caret2 {
    padding-left: 5px;
}

.sup-1 {
    color: #000000;
}

.caret1,
.carret2 {
    cursor: pointer;
    -webkit-user-select: none;
    /* Safari 3.1+ */
    -moz-user-select: none;
    /* Firefox 2+ */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    animation-name: modalbox;
    animation-duration: .4s;
}

.caret1::before {
    content: "\25B6";
    color: #c8c8c8;
    display: inline-block;
    margin-right: 7px;
}

.caret1-down::before {
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    /* Safari */
    transform: rotate(90deg);
}

.caret2::before {
    content: "\25B6";
    color: transparent;
    display: inline-block;
    margin-right: 7px;
}

.caret2-down::before {
    -ms-transform: rotate(90deg);
    /* IE 9 */
    -webkit-transform: rotate(90deg);
    /* Safari */
    transform: rotate(90deg);
}

.nested {
    display: none;
}

.active {
    display: block;
    animation-name: modalbox;
    animation-duration: .4s;
}

/* Animation */
@-webkit-keyframes modalbox {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes modalbox {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Checkbox Test</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <div class="some-space"></div>
  <div class="row">
    <div class="col-md-7 col-7">
      <div class="sidebarContent">
        <div class="container">
          <div class="row filters-title">
            <div class="col-md-12">
              <p class="colorYellow ce1">SHOW/HIDE:</p>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div class="wrapMyUL2">
                <ul id="myUL2">
                  <form>
                    <li>
                      <input type="checkbox" />
                      <span class="caret1 caret1-down">SHOW/HIDE ALL</span>
                      <ul class="nested active">
                        <li>
                          <input type="checkbox" />
                          <span class="caret1 caret1-down">SHOW/HIDE GROUP
                                                                                    #1</span>
                          <ul class="nested suboption active">
                            <li>
                              <input type="checkbox" id="checkbox1" value="1" />
                              <label id="checkbox1label" for="checkbox1">checkbox
                                                                                                #1</label>
                            </li>
                            <li>
                              <input type="checkbox" id="checkbox2" value="1" checked />
                              <label id="checkbox2label" for="checkbox2">checkbox
                                                                                                #2</label>
                            </li>
                          </ul>
                        </li>
                        <li>
                          <input type="checkbox" id="checkbox3" value="1" />
                          <label id="checkbox3label" for="checkbox3">checkbox
                                                                                    #3</label>
                        </li>

                        <li>
                          <input type="checkbox" />
                          <span class="caret1 caret1-down">SHOW/HIDE GROUP
                                                                                    #2</span>
                          <ul class="nested suboption active">
                            <li>
                              <input type="checkbox" />
                              <span class="caret1 caret1-down">SHOW/HIDE
                                                                                                SUBGROUP #2.1</span>
                              <ul class="nested suboption active">
                                <li>
                                  <input type="checkbox" id="checkbox4" value="1" />
                                  <label id="checkbox4label" for="checkbox4">checkbox
                                                                                                            #4</label>


                                </li>
                                <li>
                                  <input type="checkbox" id="checkbox5" value="1" />
                                  <label id="checkbox5label" for="checkbox5">checkbox
                                                                                                            #5</label>
                                </li>

                              </ul>
                            </li>
                            <li>
                              <input type="checkbox" id="checkbox6" value="1" />
                              <label id="checkbox6label" for="checkbox6">checkbox
                                                                                                #6</label>
                            </li>

                            <li>
                              <input type="checkbox" />
                              <span class="caret1 caret1-down">SHOW/HIDE GROUP #2.2</span>
                              <ul class="nested suboption active">
                                <li>
                                  <input type="checkbox" id="checkbox7" value="1" />
                                  <label id="checkbox7label" for="checkbox7">checkbox
                                                                                                            #7</label>
                                </li>
                                <li>
                                  <input type="checkbox" id="checkbox8" value="1" />
                                  <label id="checkbox8label" for="checkbox8">checkbox
                                                                                                            #8</label>
                                </li>
                              </ul>
                            </li>
                          </ul>
                        </li>
                      </ul>
                    </li>
                  </form>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="some-space"></div>

    </div>
    <div class="col-md-5 col-5">
      <div class="container-div">
        <p><b>CONTENT DIVS</b></p>
        <div id="entry1">
          CONTENT DIV #1
        </div>
        <div id="entry2">
          CONTENT DIV #2
        </div>
        <div id="entry3">
          CONTENT DIV #3
        </div>
        <div id="entry4">
          CONTENT DIV #4
        </div>
        <div id="entry5">
          CONTENT DIV #5
        </div>
        <div id="entry6">
          CONTENT DIV #6
        </div>
        <div id="entry7">
          CONTENT DIV #7
        </div>
        <div id="entry8">
          CONTENT DIV #8
        </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Flatlist with multiple checkbox React Native

I am using flatlist with checkboxes and I want to save the data of selected item into an array but can't be able to save the data in array

my json response

{
 "tS_CT_CODE": "ELC",
 "tS_TASK_CODE": "ELC001",
 "tS_TITLE": "Light Problem",
 "tS_TITLE_AR": "",
 "tS_PRICE": 100.0,
 "tS_STATUS": "A",
 "tS_USER_ID": "",
 "tS_SYSTEM_DATE": ""
}

I want to save tsPrice in different array and tsTitle in different array I am just able to do save only ts_title in taskName as you can see below how can I save ts_price in different array?

here is my CheckBox

const [toggleCheckBox, setToggleCheckBox] = useState([]);

<CheckBox
  checked={toggleCheckBox.includes(item.tS_TITLE)}
  onPress={() => handleListTap(item)}
/>

const handleListTap = async item => {
  const taskName = [...toggleCheckBox];
  const index = taskName.indexOf(item.tS_TITLE);
   if (index > -1) {
     taskName.splice(index, 1);
   } else {
     taskName.push(item.tS_TITLE);
   }
  console.log(taskName);
  setToggleCheckBox(taskName);
  // navigation.navigate('MaintenanceTimeSlot');
};

Update SVG progress circle by clicking checkboxes

I have 5 checkboxes representing a To-Do list, for every checkbox I click, the circle's diameter should complete 1/5, 2/5 , 3/5, 4/5, 5/5 until it completes the 5 checkboxes, the order of how the checkboxes are created shouldn't matter. If I clicked "first ToDo" and "third ToDo" without selecting "second ToDo" the circle should still show 2/5 of itself.

So far I've been able to make the circle interact with the input of the checkboxes, but I'm struggling to make the visual progress happen, when I click one of the ToDos the progress circle it's marked but not in the right order and portions, also the idea is that the visual progress should move forward to the right until completing the circle.

Looking for information online, I see people uses <circle path>but it is really confusing for me because some configurations are made through CSS while other people do it in the JS, according to me it is best that I use JS to show the progress, because it should behave in base of the checkboxes.

function update() {

  var myBar = document.getElementById("myCircle");
  //Reference the Form.
  var toDo = document.getElementById("toDo");

  //Reference all the CheckBoxes in Table.
  boxes = toDo.querySelectorAll("input[type='checkbox']:checked");
  checked = boxes.length


  myBar.style.strokeDasharray = ((checked) * 100) + "%";
  if (checked === 0) {
    alert("Please select CheckBox(s).");
  }
  return true;
}

checks = document.querySelectorAll("input[type='checkbox']");
checks.forEach(function(box) {
  box.addEventListener("change", function() {
    update()
  });
});

#myCircle {
  width: 0;
  height: 30px;
  stroke: #A3BBAD;
  stroke-width: 3px;
}

#myProgress {
  margin: auto;
  width: 50%;
  stroke: #357266;
  stroke-width: 3px;
}

<svg height="100" width="100">
  <circle id="myProgress" cx="50" cy="50" r="40" fill="transparent"/>
  <circle id="myCircle" cx="50" cy="50" r="40" fill="transparent"/>
</svg>
<br>

<form id="toDo">
  <input id="FirstToDo" type="checkbox" value="1" /><label for="FirstToDo">First</label>
  <input id="SecondToDo" type="checkbox" value="2" /><label for="SecondToDo">Second</label>
  <input id="ThirdToDo" type="checkbox" value="3" /><label for="ThirdToDo">Third</label>
  <input id="FourthToDo" type="checkbox" value="4" /><label for="FourthToDo">Fourth</label>
  <input id="FifthToDo" type="checkbox" value="5" /><label for="FifthToDo">Fifth</label>
</form>
<script src="Circle.js"></script>

React controlled checkbox, attribute checked and chrome DevTools

I am learning how to work with multiple checkboxes in react. I use hook UseState. State is array of objects. When i click checkbox, state has changed and UI render fine. But when i open chrome dev tools checked attribute stay the same, whatever i click. Is it correct behavior?

const arr_resting_ru = [
    { id: "rest1", value: "Walking", isChecked: false },
    { id: "rest2", value: "Running", isChecked: true}
];

const [resting, setResting] = useState(arr_resting_ru);

const handlerCheckBoxRest=(id)=> {
    setResting((prevState)=>{

           return prevState.map((chbox)=>{
                if(chbox.id===id) return {...chbox, isChecked:!chbox.isChecked}
                else {return chbox;}
            })

        });
}

 <div className="rest-checkbox-create-profile">
                    <div className='text-under-custom-menu'>
                        Rest:
                    </div>

                    {resting.map((rest, index) => {
                        if(rest.isChecked===true) console.log(rest.value);
                        return <p key={index}>
                                <input type='checkbox' checked={rest.isChecked} 
                                onChange={()=>handlerCheckBoxRest(rest.id)} />
                                {rest.value}
                                </p>
                            
                        })
                    }

                </div>

In chrome dev tools attribute checked don't change, but state and UI is normal

All is fine when I set defaultChecked. But it is wrong way i think

How to convert to-do list in CKEditor 5 into check box in word format?

I'm testing the function of the CKEditor 5, and noticed that in word exportation, to-do list will convert to bullet list, not exactly the same as shown in the UI as check box.

Is there any setting or work around to make the to-do list to be list of check box in word exportation?

React. Attribute checked and chrome dev tools

I am learning how to work with multiple checkboxes in react. I use hook UseState. State is array of objects. When i click checkbox, state has changed and UI render fine. But when i open chrome dev tools checked attribute stay the same, whatever i click. Is it correct behavior?