Pada artikel ini, saya akan membagikan cara memuat ulang komponen dan halaman di React.js. Mari kita mulai:
Table of Contents
Untuk refresh halaman, Anda tidak perlu react-router. Kami ingin memuat ulang halaman dengan mengklik sebuah tombol. Berikut contohnya:
Reload Page
App.js
import React from 'react';
function App() {
function refreshPage() {
window.location.reload();
}
return (
<div>
<button onClick={ refreshPage }>Refresh!</button>
</div>
);
}
export default App;
Refresh Component
Dengan menggunakan metode this.setState()
, kami hanya dapat refresh komponen:
MyComponent.js
import React from "react";
class MyComponent extends React.Component {
refresh = () => {
// re-renders the component
this.setState({});
};
render() {
return (
<div>
<button onClick={ this.refresh }>Refresh Component</button>
</div>
);
}
}
export default MyComponent;
Dengan menggunakan useState()
react hook, kita juga bisa memuat ulang sebuah komponen:
MyComponent.js
import React, { useState } from 'react';
function MyComponent() {
const [value, setValue] = useState();
const refresh = ()=>{
// re-renders the component
setValue({});
}
return (
<div>
<button onClick={ refresh }>Refresh Component</button>
</div>
);
}
export default MyComponent;
Itu dia. Terima kasih sudah membaca.🙂
refresh page in react js reload component in react js