title: How to call useState from another Page?
body: <p>Bascially whenever I deleted an item in my handleDelete function it would route back to the homePage and I wanted to display a message  that says your product succesully deleted for about 5 seconds.</p>
  <p>In my index.js I first set message to false. and inside my ProductAttribute whenever I click it the set message will be true and will show the message in Index.js/ in my UI.</p>
  <p>my handleDelete function</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { Header, Button, Modal } from &quot;semantic-ui-react&quot;;
  import axios from &quot;axios&quot;;
  import baseUrl from &quot;../../utils/baseUrl&quot;;
  import { useRouter } from &quot;next/router&quot;;
  
  function ProductAttributes({ description, _id }) {
      const [modal, setModal] = useState(false);
      const router = useRouter();
  
  async function handleDelete() {
      const url = `${baseUrl}/api/product`;
      const payload = { params: { _id } };
      await axios.delete(url, payload);
      router.push(&quot;/&quot;);
      setMessage(true);
      setTimeout(function () {
          setMessage(false);
      }, 5000);
  }
  </code></pre>
  <p>while in my Index.js. The setMessage in my useState isn't getting called from ProductAttributes file.</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import axios from &quot;axios&quot;;
  import ProductList from &quot;../components/Index/ProductList&quot;;
  import baseUrl from &quot;../utils/baseUrl&quot;;
  import { Message, Container } from &quot;semantic-ui-react&quot;;
  
  function Home({ products }) {
      const [message, setMessage] = useState(false);
      return (
          &lt;&gt;
              &lt;Container&gt;
                  {message ? (
                      &lt;Message
                          deleted
                          icon=&quot;checked&quot;
                          color=&quot;red&quot;
                          content=&quot; Product Successfully Deleted&quot;
                      /&gt;
                  ) : (
                      &quot;&quot;
                  )}
              &lt;/Container&gt;
              &lt;ProductList products={products}&gt;&lt;/ProductList&gt;
          &lt;/&gt;
      );
  }
  </code></pre>
  <p>How can I make this setMessagebe callable in ProductAttributes? am I doing it right with the Parent to Child Relation or should I bring the useState in the child to parent?</p>