How to properly reload a React element?

Question

JavaScript

There is an element in which there is a table (we get ajax when creating), a modal for creating new records (a separate element).
How to correctly call render on the parent. You need to get the table data again, reset the modal states and a lot more.

window.location.reload() looking for an alternative to reload only a specific element

//Кнопка в родителе не работает, только вызывает существующие стейты. 
//А нужно "перезапустить" весь элемент.
<Button  onClick={ ()=>this.forceUpdate() }
                             bsStyle="warning" >forceUpdate</Button>

Answer 1

As far as I understand, you need to completely remount the component. Can be wrapped in a top-level component with a key property and a method to change it.

const resetable = Component => class extends React.Component {
  state = {key: 0};
  render() { 
    return <Component
      {...this.props}
      reset={() => this.setState({key: this.state.key + 1})}
      key={this.state.key}
    />;
  }
}

example
Or without state with forceUpdate

const resetable = Component => class extends React.Component {
  render() {
    return <Component
      {...this.props}
      reset={() => this.forceUpdate()}
      key={Math.random()}
    />;
  }
}

Well, or just do the same in the parent component.

Answer 2

Proper reloading means updating the model in storage and automatically rendering the component tree.
Normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render().