Элемент рендеринга ReactJS по ссылке

Я пытаюсь отобразить родительский компонент, у которого есть два дочерних элемента. Рендеринг дочерних элементов будет переключаться, поэтому один раз будет отображаться только первый дочерний элемент, в другой раз он будет последним и, наконец, он вернется к первому дочернему элементу (который затем должен содержать все значения, показанные ранее). Я думал, что это будет просто, но оказалось, что это не так.

Теперь к проблеме: всякий раз, когда вызывается метод switchContainer, он переключает контейнер и отображает другой. Однако все переменные-члены, свойства и состояния теряются, и это в основном восстановило дочерний компонент с нуля.

Есть ли способ сохранить дочерние компоненты «как есть», и после повторного рендеринга он снова будет содержать все переменные-члены, свойства и состояния?

Я знаю, что вы можете отправлять реквизиты и состояния элементу следующим образом:

<Child props = {<data>} states = {<data>}>

но это не решает проблему с отсутствующими переменными-членами, и, на мой взгляд, это непростое решение.

Моя попытка пока (это всего лишь макет):

class Parent extends React.Component<any,any> {
  private firstContainer:any;
  private secondContainer:any;
  private currentContainer:any;
  constructor(props:any) {
        super(props);
        this.firstContainer = <Child>;
        this.secondContainer = <Child>;
    }
    public render() {
        return (
            <div>
                {this.currentContainer}
            </div>
        );
    }
    public switchContainer() {
        if (this.currentContainer === this.firstContainer) {
            this.currentContainer = this.secondContainer;
        }
        else {
            this.currentContainer = this.firstContainer;
        }
        this.forceUpdate();
    }
}


class Child extends React.Component<any,any> {
    private anyValue:string;
    constructor(props) {
        this.change = this.change.bind(this);
    }
    public render() {
        return (
            <input onChange = {this.change} value = {this.anyValue}/>
        );
    }
    private change(e:any) {
        this.anyValue = e.target.value;
    }
}