title: ReactJS how to maintain State value when refreshing page
body: <p>I'm trying not to lose my <code>state</code> value which is <code>cart</code> when the page is reloaded. I can add any <code>product</code>to my <code>cart</code>at any page but whenever i reload the page <code>cart</code>state resets itself. Is there anyway to prevent that with or without using more libraries ? I don't know if <code>Redux</code>is the only way to prevent this.</p>
  <p>My <code>App</code>function:</p>
  <pre><code>function App() {
    const [cart, setCart] = useState([]);
  
    return (
      &lt;div&gt;
        &lt;Router&gt;
          &lt;NavbarComponent cart = {cart} setCart={setCart}&gt;&lt;/NavbarComponent&gt;
          &lt;Switch&gt;
            &lt;Route exact path=&quot;/&quot;&gt;
              &lt;Home cart = {cart} setCart={setCart} /&gt;
            &lt;/Route&gt;
            &lt;Route exact path=&quot;/home&quot;&gt;
              &lt;Home cart = {cart} setCart={setCart} /&gt;
            &lt;/Route&gt;
            &lt;Route exact path=&quot;/Products&quot;&gt;
              &lt;Products cart = {cart} setCart={setCart} /&gt;
            &lt;/Route&gt;
  
            &lt;Route exact path=&quot;/Detail/:product_id&quot;&gt;
              &lt;Detail cart = {cart} setCart={setCart} &gt;&lt;/Detail&gt;
              &lt;/Route&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>And this below is just one of my components I can change my <code>cart</code> state value.</p>
  <pre><code>export function CardComponent(props) {
    const { cart, products, setCart } = props;
    //const products = props.products;
  
    const addToCart = (product) =&gt; {
      
      let tempCart = [...cart]
      tempCart.push(product); 
      setCart(tempCart)
      console.log(cart);
    };
  
    return (
      &lt;div className=&quot;container cards&quot;&gt;
        &lt;div className=&quot;featured&quot;&gt;
          Featured Products
          {cart.length}
          &lt;div className=&quot;featured-underline&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;CardColumns&gt;
          {products.map((product, index) =&gt; {
            if (product.is_featured)
              return (
                &lt;Card key={index}&gt;
                  &lt;CardImg
                    top
                    width=&quot;100%&quot;
                    src=&quot;https://dl.airtable.com/.attachmentThumbnails/5ebc46a9e31a09cbc6078190ab035abc/8480b064&quot;
                    alt=&quot;Card image cap&quot;
                  /&gt;
                  &lt;CardBody&gt;
                    &lt;CardTitle tag=&quot;h5&quot;&gt;{product.name}&lt;/CardTitle&gt;
                    &lt;CardSubtitle tag=&quot;h6&quot; className=&quot;mb-2 text-muted&quot;&gt;
                      Card subtitle
                    &lt;/CardSubtitle&gt;
                    &lt;CardText&gt;{product.description}&lt;/CardText&gt;
                    &lt;Button onClick={() =&gt; addToCart(product)} color=&quot;primary&quot;&gt;
                      Add to cart
                    &lt;/Button&gt;
                    &lt;Button color=&quot;info ml-2&quot;&gt;Detail&lt;/Button&gt;
                    &lt;p style={{ float: &quot;right&quot;, color: &quot;brown&quot; }}&gt;
                      ${product.price}
                    &lt;/p&gt;
                  &lt;/CardBody&gt;
                &lt;/Card&gt;
              );
            else return;
          })}
        &lt;/CardColumns&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>