title: Changing boolean value with React Bootstrap checkbox and hooks
body: <p>Trying to change the isVegan object (nested boolean) with React Bootstrap checkbox and hooks. I can access the object without any issues (e.g. checkbox is checked if isVegan is true), but have been unable to modify the state. As you can see in the Redux dev tools (image link included), the isVegan object is passed through my state and is accessible. I have also used similar code for the other objects in the chef collection without any issues so believe the issue is either related to the checkbox or how the isVegan object is nested in the chef collection. (Lastly, I know some of the code below may be extra, I slimmed down my original file to simplify this example)</p>
  <pre><code>import React, { useState, useEffect, setState } from 'react';
  import { Form, Button, Row, Col, Tabs, Tab } from 'react-bootstrap';
  import { LinkContainer } from 'react-router-bootstrap';
  import { useDispatch, useSelector } from 'react-redux';
  import { getChefDetails, updateChefProfile } from '../../actions/chefActions';
  import { CHEF_UPDATE_PROFILE_RESET } from '../../constants/chefConstants';
  import FormContainer from '../../components/FormContainer/FormContainer.component';
  
  import './ProfileEditPage.styles.scss';
  
  const ProfileEditPage = ({ location, history }) =&gt; {
    const [first_name, setFirstName] = useState('')
    const [last_name, setLastName] = useState('')
    const [username, setUsername] = useState('')
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [confirmPassword, setConfirmPassword] = useState('')
    const [isVegan, setIsVegan] = useState('')
    const [bio, setBio] = useState('')
    const [message, setMessage] = useState(null)
  
    const dispatch = useDispatch()
  
    const chefDetails = useSelector(state =&gt; state.chefDetails)
    const { loading, error, chef } = chefDetails
  
    const chefLogin = useSelector(state =&gt; state.chefLogin)
    const { chefInfo } = chefLogin
  
    const chefUpdateProfile = useSelector(state =&gt; state.chefUpdateProfile)
    const { success } = chefUpdateProfile
  
    useEffect(() =&gt; {
      if(!chefInfo) {
        history.push('/login')
      } else {
        if(!chef || !chef.username || success) {
          dispatch({ type: CHEF_UPDATE_PROFILE_RESET })
          dispatch(getChefDetails('profile'))
        } else {
          setFirstName(chef.first_name)
          setLastName(chef.last_name)
          setUsername(chef.username)
          setEmail(chef.email)
          setBio(chef.bio)
          setIsVegan(chef.isVegan)
        }
      }
    }, [dispatch, history, chefInfo, chef, success])
  
    const submitHandler = (e) =&gt; {
      e.preventDefault()
      if (password !== confirmPassword) {
        setMessage('Passwords do not match')
      } else {
        dispatch(updateChefProfile({
          id: chef._id,
          first_name,
          last_name,
          username,
          email,
          password,
          bio,
          isVegan
        }))
      }
    }
  
    const [key, setKey] = useState('auth')
  
    //const isVegan = chef.diets[0].isVegan
    //const isVegetarian = chef.diets[0].isVegetarian
  
    console.log(isVegan)
  
    return (
      &lt;FormContainer className=&quot;profileEditPage&quot;&gt;
        &lt;h1&gt;Chef Profile&lt;/h1&gt;
        &lt;Form className='profileEditPageForm' onSubmit={submitHandler}&gt;
          &lt;Tabs id=&quot;profileEditPageTabs&quot; activeKey={key} onSelect={(k) =&gt; setKey(k)}&gt;
            &lt;Tab eventKey='auth' title=&quot;Auth&quot;&gt;
              &lt;Form.Group controlId='first_name'&gt;
                &lt;Form.Label&gt;First Name&lt;/Form.Label&gt;
                &lt;Form.Control
                  type='text'
                  placeholder='Enter your first name'
                  value={first_name}
                  onChange={(e) =&gt; setFirstName(e.target.value)}
                  required
                &gt;
                &lt;/Form.Control&gt;
              &lt;/Form.Group&gt;
  
              &lt;Form.Group controlId='last_name'&gt;
                &lt;Form.Label&gt;Last Name&lt;/Form.Label&gt;
                &lt;Form.Control
                  type='text'
                  placeholder='Enter your last name'
                  value={last_name}
                  onChange={(e) =&gt; setLastName(e.target.value)}
                  required
                &gt;
                &lt;/Form.Control&gt;
              &lt;/Form.Group&gt;
  
              &lt;Form.Group controlId='username'&gt;
                &lt;Form.Label&gt;Username&lt;/Form.Label&gt;
                &lt;Form.Control
                  type='text'
                  placeholder='Enter a username'
                  value={username}
                  onChange={(e) =&gt; setUsername(e.target.value)}
                  required
                &gt;
                &lt;/Form.Control&gt;
                &lt;Form.Text className='muted'&gt;Your username will be public&lt;/Form.Text&gt;
              &lt;/Form.Group&gt;
  
              &lt;Form.Group controlId='email'&gt;
                &lt;Form.Label&gt;Email&lt;/Form.Label&gt;
                &lt;Form.Control
                  type='email'
                  placeholder='Enter your email'
                  value={email}
                  onChange={(e) =&gt; setEmail(e.target.value)}
                  required
                &gt;
                &lt;/Form.Control&gt;
              &lt;/Form.Group&gt;
  
              &lt;Form.Group controlId='password'&gt;
                &lt;Form.Label&gt;Password&lt;/Form.Label&gt;
                &lt;Form.Control
                  type='password'
                  placeholder='Enter your password'
                  value={password}
                  onChange={(e) =&gt; setPassword(e.target.value)}
                &gt;
                &lt;/Form.Control&gt;
              &lt;/Form.Group&gt;
  
              &lt;Form.Group controlId='confirmPassword'&gt;
                &lt;Form.Label&gt;Confirm Password&lt;/Form.Label&gt;
                &lt;Form.Control
                  type='password'
                  placeholder='Confirm password'
                  value={confirmPassword}
                  onChange={(e) =&gt; setConfirmPassword(e.target.value)}
                &gt;
                &lt;/Form.Control&gt;
              &lt;/Form.Group&gt;
            &lt;/Tab&gt;
            &lt;Tab eventKey='chef-detail' title=&quot;Chef Detail&quot;&gt;
              &lt;Form.Group controlId='isVegan'&gt;
                &lt;Form.Check
                  type='checkbox'
                  label='Vegan?'
                  checked={isVegan}
                  value={isVegan}
                  onChange={(e) =&gt; setIsVegan(e.target.checked)}
                /&gt;
              &lt;/Form.Group&gt;
  
              &lt;Form.Group controlId='bio'&gt;
                &lt;Form.Label&gt;Chef Bio&lt;/Form.Label&gt;
                &lt;Form.Control
                  as='textarea'
                  rows='5'
                  maxLength='240'
                  placeholder='Enter bio'
                  value={bio}
                  onChange={(e) =&gt; setBio(e.target.value)}
                &gt;
                &lt;/Form.Control&gt;
                &lt;Form.Text className='muted'&gt;Your bio will be public&lt;/Form.Text&gt;
              &lt;/Form.Group&gt;
            &lt;/Tab&gt;
          &lt;/Tabs&gt;
  
          &lt;Button type='submit' variant='primary'&gt;
            Update
          &lt;/Button&gt;
        &lt;/Form&gt;
  
  
      &lt;/FormContainer&gt;
  
    )
  }
  
  export default ProfileEditPage;
  </code></pre>
  <p>Actions</p>
  <pre><code>export const getChefDetails = (id) =&gt; async (dispatch, getState) =&gt; {
    try {
      dispatch({
        type: CHEF_DETAILS_REQUEST
      })
  
      const { chefLogin: { chefInfo} } = getState()
  
      const config = {
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${chefInfo.token}`
        }
      }
  
      const { data } = await axios.get(
        `/api/chefs/${id}`,
        config
      )
  
      dispatch({
        type: CHEF_DETAILS_SUCCESS,
        payload: data
      })
  
    } catch (error) {
      dispatch({
        type: CHEF_DETAILS_FAILURE,
        payload:
          error.response &amp;&amp; error.response.data.message
            ? error.response.data.message
            : error.message,
      })
    }
  }
  
  export const updateChefProfile = (chef) =&gt; async (dispatch, getState) =&gt; {
    try {
      dispatch({
        type: CHEF_UPDATE_PROFILE_REQUEST
      })
  
      const { chefLogin: { chefInfo } } = getState()
  
      const config = {
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${chefInfo.token}`
        }
      }
  
      const { data } = await axios.put(
        `/api/chefs/profile`,
        chef,
        config
      )
  
      dispatch({
        type: CHEF_UPDATE_PROFILE_SUCCESS,
        payload: data
      })
  
      dispatch({
        type: CHEF_LOGIN_SUCCESS,
        payload: data
      })
  
      localStorage.setItem('chefInfo', JSON.stringify(data))
  
    } catch (error) {
      dispatch({
        type: CHEF_UPDATE_PROFILE_FAILURE,
        payload:
          error.response &amp;&amp; error.response.data.message
            ? error.response.data.message
            : error.message,
      })
    }
  }
  </code></pre>
  <p>Reducers</p>
  <pre><code>export const chefDetailsReducer = (state = { chef: { } }, action) =&gt; {
    switch(action.type) {
      case CHEF_DETAILS_REQUEST:
        return { ...state, loading: true }
      case CHEF_DETAILS_SUCCESS:
        return { loading: false, chef: action.payload }
      case CHEF_DETAILS_FAILURE:
        return { loading: false, error: action.payload }
      case CHEF_DETAILS_RESET:
        return {
          chef: {}
        }
      default:
        return state
    }
  }
  
  export const chefUpdateProfileReducer = (state = { }, action) =&gt; {
    switch(action.type) {
      case CHEF_UPDATE_PROFILE_REQUEST:
        return { loading: true }
      case CHEF_UPDATE_PROFILE_SUCCESS:
        return { loading: false, success: true, chefInfo: action.payload }
      case CHEF_UPDATE_PROFILE_FAILURE:
        return { loading: false, error: action.payload }
      case CHEF_UPDATE_PROFILE_RESET:
        return { }
      default:
        return state
    }
  }
  </code></pre>
  <p>Controller</p>
  <pre><code>// @description Get chef profile
  // @route GET /api/chefs/profile
  // @access Private
  const getChefProfile = asyncHandler(async (req, res) =&gt; {
    const chef = await Chef.findById(req.chef._id)
  
    if(chef) {
      res.json({
        _id: chef._id,
        first_name: chef.first_name,
        last_name: chef.last_name,
        username: chef.username,
        email: chef.email,
        bio: chef.bio,
        isVegan: chef.isVegan
      })
    } else {
      res.status(404)
      throw new Error('Chef not found')
    }
  })
  
  // @description Update chef profile
  // @route PUT /api/chefs/profile
  // @access Private
  const updateChefProfile = asyncHandler(async (req, res) =&gt; {
    const chef = await Chef.findById(req.chef._id)
  
    if(chef) {
      chef.first_name = req.body.first_name || chef.first_name
      chef.last_name = req.body.last_name || chef.last_name
      chef.username = req.body.username || chef.username
      chef.email = req.body.email || chef.email
      chef.bio = req.body.bio || chef.bio
      chef.isVegan = req.body.isVegan || chef.isVegan
  
      if (req.body.password) {
        chef.password = req.body.password
      }
  
      const updatedChef = await chef.save()
  
      res.json({
        _id: updatedChef._id,
        first_name: updatedChef.first_name,
        last_name: updatedChef.last_name,
        username: updatedChef.username,
        email: updatedChef.email,
        bio: updatedChef.bio,
        isVegan: updatedChef.isVegan,
        token: generateToken(updatedChef._id),
      })
  
    } else {
      res.status(404)
      throw new Error('Chef not found')
    }
  })
  </code></pre>