title: React set state to nested object value
body: <p>I need to set state on nested object value that changes dynamically Im not sure how this can be done, this is what Ive tried.</p>
  <pre><code>const [userRoles] = useState(null);
  
  const { isLoading, user, error } = useAuth0();
  
  useEffect(() =&gt; {
      console.log(user);
      // const i = Object.values(user).map(value =&gt; value.roles);
      // ^ this line gives me an react error boundary error 
    }, [user]);
  
  // This is the provider
  &lt;UserProvider
        id=&quot;1&quot;
        email={user?.email}
        roles={userRoles}
  &gt;
  </code></pre>
  <p>The user object looks like this:</p>
  <pre><code>{
      name: &quot;GGG&quot;,
      &quot;website.com&quot;: {
        roles: [&quot;SuperUser&quot;],
        details: {}
      },
      friends: {},
      otherData: {}
  }
  </code></pre>
  <p>I need to grab the roles value but its parent, &quot;website.com&quot; changes everytime I call the api so i need to find a way to search for the roles.</p>