title: I am creating a favorite list on react. I have been able to add, get and remove the items in localstorage. How do i make the heart button persist
body: <p>I am creating a favorite list on react using <code>localstorage</code>. I have been able to add, get and remove the items in <code>localstorage</code>. But the problem is that in the '<strong><code>Works</code></strong>' section, the heart shape icon does not persist after refresh i.e it returns back to the '<strong>Not favorite</strong>' icon even though the item is still in the <strong><code>Favorites</code></strong> section. I used react-context to handle the state of the basket</p>
  <p>Below are the snippets and images;</p>
  <p><strong>Home.jsx</strong></p>
  <pre><code>    &lt;div className=&quot;works-gallery&quot;&gt;
        {allWorks.map((work, index) =&gt; {
          return (
            &lt;Works
              key={work.id}
              id={work.id}
              img={work.img}
              category={work.category}
            /&gt;
          );
        })}
      &lt;/div&gt;
    &lt;/section&gt;
  </code></pre>
  <p><strong>Works.jsx</strong></p>
  <pre><code>function handleClick() {
  setToggl(!toggl);
  if (!toggl) {
    setIcon(&lt;Favorite style={{ color: &quot;black&quot;, cursor: &quot;pointer&quot; }} /&gt;);
    addToBasket();
  } else {
    setIcon(
      &lt;FavoriteBorderIcon
        style={{ color: &quot;rgba(0, 0, 0, 0.726)&quot;, cursor: &quot;pointer&quot; }}
      /&gt;
    );
    removeFromBasket();
  }
  </code></pre>
  <p>}</p>
  <pre><code>.
  .
  .
  return (
  &lt;div className=&quot;works-div&quot;&gt;
    &lt;div
      onClick={() =&gt; {
        props.viewThisProject(props.id);
      }}
    &gt;
      &lt;img src={props.img} alt=&quot;&quot; className=&quot;works-img&quot; /&gt;
      &lt;div className=&quot;overlay&quot;&gt;
        &lt;RemoveRedEye titleAccess=&quot;VIEW PROJECT&quot; /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;article className=&quot;work-info&quot;&gt;
      &lt;div className=&quot;category-div&quot;&gt;
        &lt;p&gt;{props.category}&lt;/p&gt;
        &lt;div&gt;&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div className=&quot;fav-btn btns&quot; onClick={handleClick}&gt;
        {icon}
      &lt;/div&gt;
    &lt;/article&gt;
  &lt;/div&gt;
  </code></pre>
  <p>);</p>
  <p><strong>Favorites.jsx</strong></p>
  <pre><code>function Checkout(props) {
    const [{ basket }] = useStateValue();
    const [contactDiv, setContactDiv] = useState();
  
    useEffect(() =&gt; {
      localStorage.setItem(&quot;favorites&quot;, JSON.stringify(basket));
    }, [basket]);
  
    function displayContactDiv() {
  setContactDiv(
    &lt;Contact
      containerClass=&quot;checkout-contactDiv&quot;
      container2=&quot;checkout-contactDiv2&quot;
      close=&quot;Close&quot;
      closeClass=&quot;checkout-contact-close-btn &quot;
      onClose={Close}
    /&gt;
      );
   }
    function Close() {
      setContactDiv();
    }
  
    return (
     &lt;&gt;
    &lt;MyFavNavbar onDisplayContactDiv={displayContactDiv} /&gt;
    &lt;div className=&quot;main-contactDiv-body&quot;&gt;{contactDiv} &lt;/div&gt;
  
    &lt;div className=&quot;checkout&quot;&gt;
      &lt;div className=&quot;checkout-left&quot;&gt;
        &lt;div className=&quot;checkout-ad&quot;&gt;
          &lt;p&gt;My Favorites&lt;/p&gt;
        &lt;/div&gt;
  
        {basket?.length === 0 ? (
          &lt;div&gt;
            &lt;h2&gt;Your Favorites Section Is Empty&lt;/h2&gt;
            &lt;p&gt;
              You have no favorite. To add one or more favorite work(s) simply
              click on the 'heart' icon next to the item{&quot; &quot;}
            &lt;/p&gt;
          &lt;/div&gt;
        ) : (
          &lt;div&gt;
            &lt;h2 className=&quot;checkout-title&quot;&gt;My Favorite Designs&lt;/h2&gt;
  
            {/* list out all the checkout products */}
            &lt;div className=&quot;works&quot;&gt;
              {basket.map((work, index) =&gt; {
                return (
                  &lt;FavoriteWork
                    key={work.id}
                    id={work.id}
                    img={work.img}
                    category={work.category}
                  /&gt;
                );
              })}
            &lt;/div&gt;
          &lt;/div&gt;
        )}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/&gt;
  </code></pre>
  <p>);
  }</p>
  <p><a href="https://i.stack.imgur.com/JyPGC.png" rel="nofollow noreferrer">Checkout the favorite buttons on all works</a></p>
  <p><a href="https://i.stack.imgur.com/7kzBh.png" rel="nofollow noreferrer">Checkout the favorites are no longer marked</a></p>