如何构建我的React应用程序？

Question

现在我在前端有5个搜索输入，每个都搜索不同的东西。

我只有一个App组件，现在有5个不同的框用于显示搜索结果。我应该如何进行分割，以便只显示一个搜索结果框（搜索到的那个）？

我有以下5个代码：

       <div className='searchBox'>
          <div class='searchTitle'>Search for a Planet</div>
          <div class='searchInput'>
            <input type='text' value={this.state.planetName} onChange={this.handlePlanetNameChange.bind(this)} placeholder='Enter planet name'></input>
          </div>
        </div>
      </div>
    </div>
    <h1>Results for Person</h1>
    <table id='Person'>
      <thead>
        <tr>
          <th>Name</th>
          <th>Height</th>
          <th>Mass</th>
          <th>Hair color</th>
          <th>Skin color</th>
          <th>Eye color</th>
          <th>Birth year</th>
          <th>Gender</th>
          <th>Homeworld</th>
          <th>Films</th>
          <th>Species</th>
          <th>Vehicles</th>
          <th>Starships</th>
          <th>Url</th>
          <th>Created</th>
          <th>Edited</th>
        </tr>
      </thead>
      <tbody>

{
this.state.personData.results.map(result => (
<tr>
  <td>{result.name.toString()}</td>
  <td>{result.height.toString()}</td>
  <td>{result.mass.toString()}</td>
  <td>{result.hair_color.toString()}</td>
  <td>{result.skin_color.toString()}</td>
  <td>{result.eye_color.toString()}</td>
  <td>{result.birth_year.toString()}</td>
  <td>{result.gender.toString()}</td>
  <td>{result.homeworld.toString()}</td>
  <td>{result.films.toString()}</td>
  <td>{result.species.toString()}</td>
  <td>{result.vehicles.toString()}</td>
  <td>{result.starships.toString()}</td>
  <td>{result.url.toString()}</td>
  <td>{result.created.toString()}</td>
  <td>{result.edited.toString()}</td>
</tr>

））    }