Is there a way to change the text of a element so that the text is different

I have a program where the text will change what is displayed depending on the state, the state can be 'loading', 'updating' etc. I was wondering if there was a way to do so without needing to refresh the page. So if the state is loading then it will display "loading your data" and the same for other states.

import "./styles.css";const status = {  loading: "loading your data",  updating: "updating your data",  updated: "your data is updated"};export default function App() {  const state = "updating";  return (<div className="App"><h1>{status.loading}</h1></div>  );}