I am currently trying to assign `state` to a nested object using the hook `setState()` but I'm struggling a little bit with figuring out the syntax and how exactly I am supposed to do it. 

I have structured my component like this:

```
const MainCard = props =>{

       const passedState = props.location.state;

     return(
          <div className="main-container">
             <div className="row">
               <div className="col-md-6 col-lg-6">
                    <AttendeeCard passedState={passedState} />
               </div>
               <div className="col-md-6 col-lg-6">
                    <AttendeeCard passedState={passedState} />
               </div>
             </div>
          </div>
   )
}

export default withRouter(MainCard)

```

So the props received from `location` are the data that I'll be passing to the `AttendeeCard` component.

Here is the data I'm [passing down the component.](http://myjson.com/1cr9pa)

I have structured my `AttendeeCard` component the following way:

```
  const AttendeeCard = props =>{

            const students= props.passedState.students;
            const [isChecked, setIsChecked] = useState(false);

            const checkInStudent= () =>{
               setIsChecked(!isChecked);
            }

        return(
             students.map((student,i)=>{
                 return(
                      <div className="studentCard">
                          <div className="checkinput">
                              <input type="checkbox" 
                                  onChange={checkInStudent}
                                  checked value={isChecked}/>
                               <span className="slider round"></span>
                          </div>
                      </div>
                  )
             })

     )
   }

```

So instead of using `const [isChecked, setIsChecked] = useState(false);` to assign one state to all checkboxes, I'd like to assign each `checkedin` state corresponding to the users.

I've tried writing something like:

```
       students.map((student,i)=>{
             const [isChecked, setIsChecked] = useState(student.checkedin);

           return(
                      <div className="studentCard">
                          <div className="checkinput">
                              <input type="checkbox" 
                                  onChange={checkInStudent}
                                  checked value={isChecked}/>
                               <span className="slider round"></span>
                          </div>
                      </div>
                  )
             })
       })

```

but I got an error and it didn't compile.

How can I assign state for each of the `checkedin` nested objects per student in my array?

UPDATE:

The error I get whenever I try the code above is:

> 
> React Hook "useState" cannot be called inside a callback. React Hooks
>  must be called in a React function component or a custom React Hook
>  function react-hooks/rules-of-hooks
> 
> 
>