Refreshing a React Page

react refresh page – React refresh or reload page Example: how to refresh the page using react window.location.reload(false);

react refresh page – How to Refresh a Page or Component in React?

react refresh page To refresh a page, we need to use the window.location.reload() method in React. In this article, I’m going to share how to reload a component and page in React.js

Method 1: Refresh a Page Using JavaScript

window.location.reload(false);



/src/Reload.js


import React from 'react'

class Reload extends React.Component{

function storeProductData() {
window.location.reload(false);
}

render(){
return(
<div>
<button onClick={storeProductData}>Click to reload!</button>
</div>
)
}
}

export default Reload;

Method 2: Update State

ShoppingCart.js
 

import React, { useState } from 'react';

function ShoppingCart() {
const [cart, setCart] = useState([]);

function storeProductData(e) {
const item = e.target.value;
console.log(item);
setCart(cart => [...cart, item]);
}

return (
<div className="app">
<div className="items">
<button value="Laptop Pro" onClick={storeProductData}>???? Laptop Pro</button>
<button value="iPhone XS" onClick={storeProductData}>????iPhone XS</button>
<button value="Computer" onClick={storeProductData}>???? Computer</button>
<button value="DVD Bear" onClick={storeProductData}>???? DVD Bear</button>
</div>
<div className="cart">
????Cart
<ul>
{cart.map(item => <li key={item}>{item}</li>)}
</ul>
</div>
</div>
);
}

export default ShoppingCart;

I hope you get an idea about react refresh page.

• This blog post was originally published at: https://www.pakainfo.com

#react #reactjs