Отображение списка динамически реагирует, когда пользователь нажимает на поле ввода

Question

Я пытаюсь отобразить список динамически, когда пользователь нажимает на поле ввода.для этого я взял дескриптор события onChange в поле ввода и установил состояние для новых данных, когда пользователь нажимает на поле ввода.но это не дает мне желаемого результата.Кто-нибудь может помочь мне решить проблему?Когда пользователь нажимает на поле ввода, должен отображаться только список, но в моем случае он уже отображается.

SearchBox.js

import React, { Component } from "react";
import SourceData from "../assets/continents.json";

class SearchBox extends Component {
  state = {
    value: ""
  };

  handleChange = e => {
    this.setState({
      sourceData: SourceData
    });
  };

  render() {
    const searhBox = (
      <input type="text" value={this.state.value} onClick={this.handleChange} />
    );
    const selectBox2 = SourceData.map(option => <li>{option.continent}</li>);

    return (
      <React.Fragment>
        <h2>Step 1</h2>
        <h3>Select a continent.</h3>
        {searhBox}
        <ul>{selectBox2}</ul>
      </React.Fragment>
    );
  }
}

export default SearchBox

continents.json

[
  {
    "continent": "Africa",
    "countries": [
      {
        "name": "Nigeria",
        "flag": "ð³ð¬"
      },
      {
        "name": "Ethiopia",
        "flag": "ðªð¹"
      },
      {
        "name": "Egypt",
        "flag": "ðªð¬"
      },
      {
        "name": "DR Congo",
        "flag": "ð¨ð©"
      },
      {
        "name": "South Africa",
        "flag": "ð¿ð¦"
      }
    ]
  },
  {
    "continent": "America",
    "countries": [
      {
        "name": "USA",
        "flag": "ðºð¸"
      },
      {
        "name": "Brazil",
        "flag": "ð§ð·"
      },
      {
        "name": "Mexico",
        "flag": "ð²ð½"
      },
      {
        "name": "Colombia",
        "flag": "ð¨ð´"
      },
      {
        "name": "Argentina",
        "flag": "ð¦ð·"
      }
    ]
  },
  {
    "continent": "Asia",
    "countries": [
      {
        "name": "China",
        "flag": "ð¨ð³"
      },
      {
        "name": "India",
        "flag": "ð®ð³"
      },
      {
        "name": "Indonesia",
        "flag": "ð®ð©"
      },
      {
        "name": "Pakistan",
        "flag": "ðµð°"
      },
      {
        "name": "Bangladesh",
        "flag": "ð§ð©"
      }
    ]
  }

 ]

output ::

Answer 1

В SearchBox.render составьте список стран из this.state.sourceData

const selectBox2 = this.state.sourceData.map(option => <li>{option.continent}</li>);

return (
  <React.Fragment>
    <h2>Step 1</h2>
    <h3>Select a continent.</h3>
    {searhBox}
    {selectBox2 && <ul>{selectBox2}</ul>}
  </React.Fragment>
);

Кроме того, не забудьте установить начальное значение для sourceData в SearchBox.state.

state = {
   value: '',
   sourceData: []
};