How to manipulate the DOM inside of map function using onChange event on one of the checkboxes with react hooks

Question

So first I import really simple "database" object from a different file which has a students array property in it. After that I map through the students array to display all of the students on the window object. All went well until I tried to dynamically change class name on one of the div tags inside of map function every time when state for status is changing to true I want to display information otherwise that div should stay invisible. After implementing the code below and trying to tick the box I am getting error "Cannot create property '0' on boolean 'true'". Please tell me what I am doing wrong. Thank You for Your interest in that case.

 import React,{ useState,useEffect } from 'react' import db from './db' import './App.css' const App = () => { const [status,setStatus] = useState(database.map((student) => { return student.isChecked })) return db.students.map(({name,id,email,isChecked}, index) => { return ( <form key={id} className='form'> <h2> {name} </h2> <select name='student_attendance' className='form__dropdown' defaultValue='present'> <option value='present'> present </option> <option value='absent'>absent</option> </select> <div> <label htmlFor={id}>Left early</label> <input type='checkbox' name='leftEarly' id={id} /> </div> <div> <label htmlFor={email}>Arrival late</label> <input type='checkbox' name='arrivalLate' id={email} onChange= {(event) => { setStatus(status => status[index] = event.currentTarget.checked ) }}/> </div> <div className={status[index] ? 'visible' : 'invisible'> <p>time: </p> </div> </form> ) }) } export default App 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 

Answer 1

The argument to setStatus should be either:

• The new value for status

or

• A function that takes a previous version of status and returns the new version

You are passing it a function that modifies the received value of status, and then returns a boolean value. So it appears that status is changing to that boolean value, and then the status[index] in your className expression is essentially evaluating true[0] , which results in the error.

To fix this, fix your use of the setStatus() function:

setStatus(status => [
    ...status.slice(0, index),     
    event.currentTarget.checked,
    ...status.slice(index + 1)
])

You may also want to try this, which doesn't rely on the event properties:

setStatus(status => [
    ...status.slice(0, index),     
    !status[index],
    ...status.slice(index + 1)
])

Or even this:

setStatus(status => 
    status.map((x, i) => (i === index) ? !x : x)
)