Search

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Babel + JSX

class DynamicSearch extends React.Component{

  state =  {
    searchString: ''
  }

  // sets state, triggers render method
  handleChange = event => {
    this.setState({searchString:event.target.value});
  }

  render(){
		let countries = this.props.items;
    let searchString = this.state.searchString.trim().toLowerCase();

    // filter countries list by value from input box
		if(searchString.length > 0) {
      countries = countries.filter(function(country) {
        return country.name.toLowerCase().match( searchString );
      });
    } 

    return (
      <div>
        <input type="text"  value={this.searchString} onChange={this.handleChange} placeholder="Search!" />
        <ul>
          { countries.map(country => { return <li>{country.name} </li> }) }
        </ul>
      </div>
    )
  }
}

const countries = [
  {"name": "Sweden"}, {"name": "China"}, {"name": "Peru"}, {"name": "Czech Republic"},
  {"name": "Bolivia"}, {"name": "Latvia"}, {"name": "Samoa"}, {"name": "Armenia"},
  {"name": "Greenland"}, {"name": "Cuba"}, {"name": "Western Sahara"}, {"name": "Ethiopia"},
  {"name": "Malaysia"}, {"name": "Argentina"}, {"name": "Uganda"}, {"name": "Chile"},
  {"name": "Aruba"}, {"name": "Japan"}, {"name": "Trinidad and Tobago"}, {"name": "Italy"},
  {"name": "Cambodia"}, {"name": "Iceland"}, {"name": "Dominican Republic"}, {"name": "Turkey"},
  {"name": "Spain"}, {"name": "Poland"}, {"name": "Haiti"}
];

ReactDOM.render(
  <DynamicSearch items={ countries } />,
  document.getElementById('root')
);