обновить значение по умолчанию при повторном

Question

Здесь, в поле ввода, я передаю начальное значение с помощью ловушки useState. Теперь предположим, что я печатаю в поле ввода и повторно визуализирую компонент, нажав кнопку «изменить», он по-прежнему показывает введенное значение ввода. Но я хочу иметь начальное значение при повторном рендеринге компонента. Как это сделать?

import React , { useState, useEffect } from "react";
import "./styles.css";

export default function App({val}) {
 const [value, setValue] = useState(val);
 const [x, setX] = useState(100);

const handleChange = (e) => {
 console.log(e.target.value)
 setValue(e.target.value)
} 

const handleClick = () => {
 console.log('l')
 setX(10)
}

useEffect(() => {
console.log('ef')
}, [x])
return (
<div className="App">
  <input 
    name="box"
    value={value}
    onChange={handleChange}
  />
  {x}
  <button onClick={() => handleClick()}>Change</button>
</div>

); }

Answer 1

Вы можете просто сбросить свое значение состояния по нажатию этой кнопки, т.е.

const handleClick = () => {
  setValue(val);
  setX(10)
}