javascript - タブで反応コンポーネントをレンダリングする方法は?

Question

ここでは、"Selected Planets" というタブに "ListSelected" コンポーネントのみを表示し、"Planets List" タブというタブに残りのコンポーネント (FetchPlanets) 全体を表示する方法を説明します。別のタブで「ListSelected」コンポーネントのみをレンダリングし、残りのコンポーネント全体(「FetchPlanets」)を別のタブでレンダリングする方法は? したがって、小道具として渡された選択された惑星を更新するべきではありません

FetchPlanets.jsx

import React from "react";
import { ListGroup, Container } from "react-bootstrap";
import "./components.css";
import ListSelected from "./ListSelected";
export default class FetchPlanets extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      planets: null,
      selectedPlanets: []
    };
  }
  async componentDidMount() {
    const url = "asdf";
    const res = await fetch(url);
    const data = await res.json();
    this.setState({ planets: data, loading: false });
    console.log(this.state.planets);
  }
  fetch = e => {
    const data = this.state.selectedPlanets;
    data.push(e.target.innerText);
    this.setState({
      selectedPlanets: data
    });
  };

  render() {
    const splanets = this.state.selectedPlanets.map(function(item) {
      return <li> {item} </li>;
    });
    return (
      <Container fluid>
        {this.state.loading || !this.state.planets ? (
          <div>Loading...</div>
        ) : (
          <ListGroup>
            {this.state.planets.map((planetnames, index) => {
              return (
                <ListGroup.Item
                  onClick={e => {
                    this.fetch(e);
                  }}
                  className="selectlg"
                >
                  {planetnames.id}
                </ListGroup.Item>
              );
            })}
          </ListGroup>
        )}

        <ListSelected selp={splanets} />
      </Container>
    );
  }
}