有没有办法改变a的文本<h1>元素使文本不同</h1>

Question

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>
  );
}

Answer 1

You will need an async function to update the current state depending on some other condition(when the data is loaded change the text to updated etc.) by using template literals between the h1 tag. But looks like you are an ultimate beginner. Keep up the good work.

Answer 2

Obviously you aren't changing the state just yet, so it will always be "updating" . But in order to get the right message from the status dictionary based on the state, what you write is:

<h1>{status[state]}</h1>

We use bracket notation instead of dot notation to access a property when the key is a variable.

MDN: Property accessors