title: How to add pin note feature in React, Node and Mongoose?
body: <p>I wanna add the pin feature. When a note is pinned the icon color will be green and when it's not pinned, the icon should be black. when I click the pin button, the database is updating but the color is not changing. The color is changing when I reload the page.</p>
  <p><a href="https://i.stack.imgur.com/dn4RF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dn4RF.png" alt="enter image description here" /></a></p>
  <p>I was trying but I couldn't.</p>
  <p><strong>This is the code of the child component</strong></p>
  <pre><code>import React, { useState } from 'react';
  import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
  import { faPenToSquare, faTrash, faExpand, faThumbTack } from '@fortawesome/free-solid-svg-icons';
  import { Link } from 'react-router-dom';
  import axios from 'axios';
  
  
  
  const SingleNote = ({ note, pinned, setPinned }) =&gt; {
  
      const { title, body, _id, pinStatus } = note;
  
      const handlePin = () =&gt; {
          pinStatus ? axios.put(`http://localhost:5000/notes/pin/${_id}`, { pinStatus: false })
              .then(res =&gt; {
                  res.status === 200 &amp;&amp; setPinned(false)
              })
              :
              axios.put(`http://localhost:5000/notes/pin/${_id}`, { pinStatus: true })
                  .then(res =&gt; {
                      res.status === 200 &amp;&amp; setPinned(true)
                  })
      }
  
  
      return (
          &lt;div className=&quot;rounded bg-white overflow-hidden transition-all duration-300 shadow-lg hover:shadow-purple-100&quot;&gt;
              &lt;div className=&quot;px-6 py-4 relative&quot;&gt;
                  &lt;p className=&quot;font-bold text-xl mb-2 font-serif&quot;&gt;
                      {
                          title.length &gt; 19 ? `${title.slice(0, 20)}...` : title
                      }
                  &lt;/p&gt;
                  &lt;button className='absolute top-3 right-3' onClick={handlePin}&gt;
                      &lt;FontAwesomeIcon
                          icon={faThumbTack}
                          className={
                              pinStatus ? 'text-emerald-500' : 'text-black'
                          }
                      /&gt;
                  &lt;/button&gt;
                  &lt;hr /&gt;
                  &lt;p className=&quot;text-gray-700 text-base&quot;&gt;
                      {
                          body.length &gt; 99 ? `${body.slice(0, 100)}...` : body
                      }
                  &lt;/p&gt;
              &lt;/div&gt;
              &lt;div className=&quot;px-6 pt-4 pb-2 flex justify-end&quot;&gt;
                  &lt;Link to={`/notes/${_id}`}&gt;
                      &lt;button className='btn-c btn'&gt;
                          &lt;FontAwesomeIcon icon={faExpand} /&gt;
                      &lt;/button&gt;
                  &lt;/Link&gt;
                  &lt;Link to={`/edit/${_id}`}&gt;
                      &lt;button className='btn-b btn'&gt;
                          &lt;FontAwesomeIcon icon={faPenToSquare} /&gt;
                      &lt;/button&gt;
                  &lt;/Link&gt;
                  &lt;button className='btn-a btn'&gt;
                      &lt;FontAwesomeIcon icon={faTrash} /&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  };
  
  export default SingleNote;
  </code></pre>
  <p><strong>This is the parent component</strong></p>
  <pre><code>const AllNotes = () =&gt; {
      const [pinned, setPinned] = useState(false);
      const [notes, setNotes] = useState([])
      useEffect(() =&gt; {
          fetch(`http://localhost:5000/notes/`)
              .then(res =&gt; res.json())
              .then(data =&gt; {
                  setNotes(data)
              })
      }, [pinned])
  
  
      return (
          &lt;&gt;
              &lt;Header /&gt;
              &lt;div className='container mx-auto'&gt;
                  &lt;div className='p-10 grid grid-cols-1 sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3 gap-5'&gt;
                      {
                          notes.map((note) =&gt; &lt;SingleNote
                              key={note._id}
                              note={note}
                              pinned={pinned}
                              setPinned={setPinned}
                          /&gt;)
                      }
                  &lt;/div&gt;
                  &lt;Link to='/addNote'&gt;
                      &lt;button
                          className='fixed right-5 bottom-5 md:right-10 md:bottom-10 h-10 w-10 sm:w-12 sm:h-12 bg-emerald-600 hover:bg-emerald-700 transition-all duration-300 text-white rounded-full'
                      &gt;
                          &lt;FontAwesomeIcon icon={faPlus} /&gt;
                      &lt;/button&gt;
                  &lt;/Link&gt;
              &lt;/div&gt;
          &lt;/&gt;
      );
  };
  
  export default AllNotes;
  </code></pre>