[Solved]-How can I reset a react component including all transitively reachable state?-Reactjs

maybe you can use the method reset() of the form:

import { useref } from 'react';

interface props {
    data: string;
}

function demo(props: props) {
    const formref = useref<htmlformelement | null>(null);

    function resethandler() {
        formref.current?.reset();
    }

    return(
        <form ref={formref}>
            <input defaultvalue={props.data}/>
            <button onclick={resethandler}>reset</button>
        </form>
    );
}

the approach where you add a key property to the element and control its value from the parent works correctly. here is an example of how you use a component to reset itself.

the key is controlled in the parent element, but the function that updates the key is passed as a prop to the main element. that way, the button that resets a form can reside in the form component itself.

const innerform = (props) => {
  const { resetform } = props;
  const [value, setvalue] = usestate('initialvalue');

  return (
    <>
      value: {value}
      <button onclick={() => { setvalue('newvalue'); }}>
        change value
      </button>
      <button onclick={resetform}>
        reset form
      </button>
    </>
  );
};

export const app = (props) => {
  const [resetheuristickey, setresetheuristickey] = usestate(false);
  const resetform = () => setresetheuristickey(!resetheuristickey);
  return (
    <>
      <h1>form</h1>
      <innerform key={resetheuristickey} resetform={resetform} />
    </>
  );
};

you should actually avoid replacestate and use setstate instead.

the docs say that replacestate "may be removed entirely in a future version of react." i think it will most definitely be removed because replacestate doesn't really jive with the philosophy of react. it facilitates making a react component begin to feel kinda swiss knife-y. this grates against the natural growth of a react component of becoming smaller, and more purpose-made.

in react, if you have to err on generalization or specialization: aim for specialization. as a corollary, the state tree for your component should have a certain parsimony (it's fine to tastefully break this rule if you're scaffolding out a brand-spanking new product though).

anyway this is how you do it. similar to ben's (accepted) answer above, but like this:

this.setstate(this.getinitialstate());

also (like ben also said) in order to reset the "browser state" you need to remove that dom node. harness the power of the vdom and use a new key prop for that component. the new render will replace that component wholesale.

reference: https://facebook.github.io/react/docs/component-api.html#replacestate

adding a key attribute to the element that you need to reinitialize, will reload it every time the props or state associate to the element change.

key={new date().gettime()}

here is an example:

render() {
  const items = (this.props.resources) || [];
  const totalnumberofitems = (this.props.resources.noofitems) || 0;

  return (
    <div classname="items-container">
      <paginationcontainer
        key={new date().gettime()}
        totalnumberofitems={totalnumberofitems}
        items={items}
        onpagechange={this.onpagechange}
      />
    </div>
  );
}