Sometimes, we want to reset a React element.

In this article, we’ll look at how to reset a React element.

How to reset a React element?

To reset a React element, we can change the value of the key prop of the element.

For instance, we write:

import React, { useState } from "react";

export default function App() {
  const [key, setKey] = useState();

  return (
    <div>
      <button onClick={() => setKey(Math.random())}>reload</button>
      <div key={key}>{Math.random()}</div>
    </div>
  );
}

We define the key state with the useState hook.

Then we add a button with the onClick prop set to a function that calls setKey with a random number.

Next, we assign the key state as the value of the key prop.

As a result, we should see the random number in the div change when we click on the button.

Conclusion

To reset a React element, we can change the value of the key prop of the element.