title: How to lift a REACT state?
body: <p>all.</p>
  <p>I'm learning REACT and came upon a problem.</p>
  <p>Basically, I want to move an &quot;handle state&quot; function to the parent component (App), and call it inside the Child component (MenuItem).</p>
  <p>In the App Component I create a function &quot;handleClickFavorite&quot; that handles the state of the variable &quot;isFavorite&quot;.</p>
  <p>In the MenuItem Component I pass both the function and the variable as props and use them in a onClick event. Basically, I want to change between two CSS classes (Favorite and NotFavorite) of the item everytime I click the button or div.</p>
  <p>The MenuList part just takes the elements of an array , which are rendered individually in MenuItem, and maps them</p>
  <p>App component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState } from 'react';
  import './App.css';
  import MenuList from './components/MenuList';
  import foodItems from './components/data.js';
  
  const App = (props) =&gt; {
    const [isFavorite, setIsFavorite] = useState(props.isFavorite);
  
    const handleClickFavorite = () =&gt; {
      setIsFavorite(!isFavorite);
    };
  
    return (
      &lt;div&gt;
        &lt;h1&gt;Wild Restaurant Menu&lt;/h1&gt;
        &lt;MenuList
          isFavorite={isFavorite}
          handleClickFavorite={handleClickFavorite}
          foodItems={foodItems}
        /&gt;
      &lt;/div&gt;
    );
  };
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  <p>MenuList Component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import MenuItem from './MenuItem';
  
  function MenuList({ foodItems }) {
    console.log(foodItems);
    return (
      &lt;div&gt;
        {foodItems.map((element, index) =&gt; (
          &lt;MenuItem {...element} key={index} /&gt;
        ))}
      &lt;/div&gt;
    );
  }
  
  export default MenuList;</code></pre>
  </div>
  </div>
  </p>
  <p>MenuItem Component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState } from 'react';
  import '../App.css';
  
  function MenuItem(props) {
    //create a state isFavorite that has the inital value of isFavorite that comes from the props
    const {
      itemName,
      description,
      foodImage,
      price,
      isFavorite,
      handleClickFavorite,
    } = props;
  
    return (
      &lt;div className="itemContainer"&gt;
        &lt;div className="leftContainer"&gt;
          &lt;div className="imgContainer"&gt;
            {/* the image will receive the url src from the props */}
            &lt;img src={foodImage} alt="" /&gt;
          &lt;/div&gt;
          &lt;div className="itemDescription"&gt;
            {/* the h3 will receive the item name from the props */}
            &lt;h3&gt;{itemName}&lt;/h3&gt;
            {/* the p will receive the item description from the props */}
            &lt;p&gt;{description}&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div className="rightContainer"&gt;
          {/* the div will receive the item price from the props */}
          &lt;div&gt;{price} EUR&lt;/div&gt;
  
          {/* the div with id favorite will have 2 attributes:
                  - onClick, will call the method handleClickFavorite,
                  - classname, that will be conditionally rendered, depending on the value of isFavorite from the component's state
              */}
          &lt;div
            id="favorite"
            onClick={handleClickFavorite}
            className={isFavorite ? 'isFavorite' : 'notFavorite'}
          /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default MenuItem;</code></pre>
  </div>
  </div>
  </p>
  <p>It's my first time asking a question here, so pls be gentle. I tried many soluctions, but unfortunately nothing is working. The state of isFavorite doesn't change, and neither the classes.</p>
  <p>Can someone help me?</p>