Displaying list dynamically in react when user click on input filed

Question

I am trying to display list dynamically when user click on input box. for that I took onChange event handle on input box and setting state to new data when user click on input box. but it is not giving me desired result. can anyone help me to solve the issue ? When user click on input box then only list should be displayed but in my case it's displaying already.

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 ::

Oluwafemi Sule · Accepted Answer · 2019-02-14 00:27:28Z

2

In SearchBox.render, build up the list of countries from 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>
);

Also, remember to set an initial value for sourceData in SearchBox.state.

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

edited Feb 14, 2019 at 0:27

answered Feb 14, 2019 at 0:21

Oluwafemi Sule

39.3k1 gold badge63 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pooja gajera Over a year ago

Thank you it's working... to make all items clickable should I use li or select box ?

Oluwafemi Sule Over a year ago

That depends on the UX you're driving to implement here. I'd use select box and make the list items options in it and then remove the input field. However from the mock you've shared, I'd make the list items clickable.

Collectives™ on Stack Overflow

Displaying list dynamically in react when user click on input filed

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related