title: React Hooks: State Is Not Updating in Function
body: <p>I have spent several hours trying to fix this issue with no luck. I have a reusable component that starts with a state of any empty object, the object is given a series of properties based off of props, and then based on user input on each set of radio buttons will show a child component.</p>
  <p>Unfortunately, the function that is supposed to update the state that will then trigger whether the user sees the child component is not working.</p>
  <p>I believe the issue is in my editDisplay function. Currently when I click one of the radio buttons the new object that should become the new state is logged to the console correctly, but when I use React Devtools to inspect the page, I see that state is not updating. That being said, I could see a case where I am misunderstanding useEffect, and perhaps useEffect is running each time editDisplay is running. Any help would be appreciated.</p>
  <pre><code>import React, {useState, useEffect} from 'react'
  import {Form} from 'react-bootstrap'
  import RatingInput from './RatingInput'
  
  export default function MembershipForm({inputs, name, record, setRecord}) {
  
    const [display, setDisplay] = useState({})
  
    useEffect(()=&gt;{
        inputs.forEach(input =&gt; {
            var newDisplay = display
            newDisplay[name+input]=false
            setDisplay(newDisplay)})
    },[])
  
      const editDisplay = (input, visible) =&gt; {
          var newDisplay =display
            newDisplay[name+input]=visible
            console.log(newDisplay)
            setDisplay(newDisplay)
      }
  
      const questions=inputs.map(input =&gt; {
          return (
              &lt;div key={name+input}&gt;
                  &lt;Form.Group&gt;
                      &lt;Form.Label className='mx-2'&gt;Do you have a {name} {input} Rating?&lt;/Form.Label&gt;
                      &lt;Form.Check inline label='Yes' value={true} name={name+input} type='radio' className = 'mx-2' onClick ={() =&gt;{editDisplay(input, true)}} /&gt;
                      &lt;Form.Check inline label='No' value ={false} name={name+input}  type='radio' className = 'mx-2' defaultChecked onClick = {() =&gt;{editDisplay(input, false)}}  /&gt;
                  &lt;/Form.Group&gt;
                  {display[name+input] &amp;&amp; &lt;RatingInput input={input}/&gt;}
                  
              &lt;/div &gt;
          )
      })
  
      return (
          &lt;div className='ml-3'&gt;
              {questions}
          &lt;/div&gt;
      )
  }
  </code></pre>