title: How to access property with a condition inside React.useState() and change it
body: <p>I have a component that uses <code>React.useState</code> to keep a property named <code>available</code>
  and what I want to do is to change its value to true with a conditional statement, so that my component gets rendered based on that condition, but I can't set up a conditional statement inside <code>React.useState</code>. I tried changing it in my other component with a conditional statement:</p>
  <pre><code>  const [isUserLogged] = React.useState(true);
    const arrowDir = props['data-expanded']
      ? 'k-i-arrow-chevron-down'
      : 'k-i-arrow-chevron-right';
  
    if (isUserLogged === true) {
      props.available === true;
    }
  </code></pre>
  <p>But that didn't work too. How can I achieve this with a conditional statement? Here is my entire code:</p>
  <pre><code>import * as React from 'react';
  import { withRouter } from 'react-router-dom';
  import {
    Drawer,
    DrawerContent,
    DrawerItem,
  } from '@progress/kendo-react-layout';
  import { Button } from '@progress/kendo-react-buttons';
  
  const CustomItem = (props) =&gt; {
    const { visible, ...others } = props;
    const [isUserLogged] = React.useState(true);
    const arrowDir = props['data-expanded']
      ? 'k-i-arrow-chevron-down'
      : 'k-i-arrow-chevron-right';
  
    if (isUserLogged === true) {
      props.available === true;
    }
  
    return (
      &lt;React.Fragment&gt;
        {props.available === false ? null : (
          &lt;DrawerItem {...others}&gt;
            &lt;span className={'k-icon ' + props.icon} /&gt;
            &lt;span className={'k-item-text'}&gt;{props.text}&lt;/span&gt;
            {props['data-expanded'] !== undefined &amp;&amp; (
              &lt;span
                className={'k-icon ' + arrowDir}
                style={{
                  position: 'absolute',
                  right: 10,
                }}
              /&gt;
            )}
          &lt;/DrawerItem&gt;
        )}
      &lt;/React.Fragment&gt;
    );
  };
  
  const DrawerContainer = (props) =&gt; {
    const [drawerExpanded, setDrawerExpanded] = React.useState(true);
    const [isUserLogged] = React.useState(true);
  
    const [items, setItems] = React.useState([
      {
        text: 'Education',
        icon: 'k-i-pencil',
        id: 1,
        selected: true,
        route: '/',
      },
      {
        separator: true,
      },
      {
        text: 'Food',
        icon: 'k-i-heart',
        id: 2,
        ['data-expanded']: true,
        route: '/food',
      },
      {
        text: 'Japanese Food',
        icon: 'k-i-minus',
        id: 4,
        parentId: 2,
        route: '/food/japanese',
      },
      {
        text: 'Secret Food',
        icon: 'k-i-minus',
        id: 5,
        parentId: 2,
        route: '/food/italian',
        available: false,
      },
      {
        separator: true,
      },
      {
        text: 'Travel',
        icon: 'k-i-globe-outline',
        ['data-expanded']: true,
        id: 3,
        route: '/travel',
      },
      {
        text: 'Europe',
        icon: 'k-i-minus',
        id: 6,
        parentId: 3,
        route: '/travel/europe',
      },
      {
        text: 'North America',
        icon: 'k-i-minus',
        id: 7,
        parentId: 3,
        route: '/travel/america',
      },
    ]);
  
    const handleClick = () =&gt; {
      setDrawerExpanded(!drawerExpanded);
    };
  
    const onSelect = (ev) =&gt; {
      const currentItem = ev.itemTarget.props;
      const isParent = currentItem['data-expanded'] !== undefined;
      const nextExpanded = !currentItem['data-expanded'];
      const newData = items.map((item) =&gt; {
        const {
          selected,
          ['data-expanded']: currentExpanded,
          id,
          ...others
        } = item;
        const isCurrentItem = currentItem.id === id;
        return {
          selected: isCurrentItem,
          ['data-expanded']:
            isCurrentItem &amp;&amp; isParent ? nextExpanded : currentExpanded,
          id,
          ...others,
        };
      });
      props.history.push(ev.itemTarget.props.route);
      setItems(newData);
    };
  
    const data = items.map((item) =&gt; {
      const { parentId, ...others } = item;
  
      if (parentId !== undefined) {
        const parent = items.find((parent) =&gt; parent.id === parentId);
        return { ...others, visible: parent['data-expanded'] };
      }
  
      return item;
    });
    return (
      &lt;div&gt;
        &lt;div className=&quot;custom-toolbar&quot;&gt;
          &lt;Button icon=&quot;menu&quot; look=&quot;flat&quot; onClick={handleClick} /&gt;
          &lt;span className=&quot;title&quot;&gt;Categories&lt;/span&gt;
        &lt;/div&gt;
        &lt;Drawer
          expanded={drawerExpanded}
          mode=&quot;push&quot;
          width={180}
          items={data}
          item={CustomItem}
          onSelect={onSelect}
        &gt;
          &lt;DrawerContent&gt;{props.children}&lt;/DrawerContent&gt;
        &lt;/Drawer&gt;
      &lt;/div&gt;
    );
  };
  
  export default withRouter(DrawerContainer);
  </code></pre>