title: How to create a searchbar for API data using reactjs?
body: <p>I'm new to react, i have created a <code>User component</code> and <code>search bar</code> but unable to search the data from the component. I mean i couldn't able to figure it out how to searchBar component to work. How to filter the items as we type in the search bar.</p>
  
  <p>Here is the component for User:</p>
  
  <pre><code>import React from "react";
  import {
    Container,
    Checkbox,
    Grid,
    Header,
    Button,
    Popup,
    Avatar,
    Icon,
    Divider
  } from "semantic-ui-react";
  import Search from "./Search";
  export default class DataView extends React.Component {
    constructor() {
      super();
      this.state = {
        Users: []
      };
    }
    componentDidMount() {
      this.fetchData();
    }
    componentDidUpdate() {
      this.fetchData();
    }
    fetchData() {
      fetch("api/Users")
        .then(response =&gt; response.json())
        .then(data =&gt; {
          this.setState({
            Users: data.item1
          });
        });
    }
  
    searchUsers = text =&gt; {
      console.log(text);
      fetch("api/Users")
        .then(response =&gt; response.json())
        .then(data =&gt; {
          this.setState({
            Users: data.item1
          });
        });
    };
  
    render() {
      const { Users } = this.state;
      return (
        &lt;div&gt;
          &lt;Search searchUsers={this.searchUsers} /&gt;
          &lt;Container&gt;
            {Users.map(View =&gt; {
              return (
                &lt;Grid key={View.id}&gt;
                  &lt;Grid.Row&gt;
                    &lt;Checkbox /&gt;
                    &lt;Header&gt;
                      {View.firstName} {View.lastName}
                    &lt;/Header&gt;
                  &lt;/Grid.Row&gt;
                  &lt;Divider /&gt;
                  &lt;Grid.Row&gt;
                    &lt;Avatar
                      name={View.firstName + " " + View.lastName}
                      maxInitials={2}
                      round={true}
                    /&gt;
  
                    &lt;Grid.Column&gt;
                      &lt;Icon name="calendar outline" /&gt;
                      {View.experience}
                      &lt;br /&gt;
                      &lt;Icon name="money bill alternate outline" /&gt;
                      {View.salary}
                    &lt;/Grid.Column&gt;
                  &lt;/Grid.Row&gt;
                  &lt;Divider /&gt;
                  &lt;Grid.Row&gt;
                    &lt;Grid.Column&gt;
                      &lt;Popup
                        content={View.email}
                        trigger={&lt;Button icon="mail outline" /&gt;}
                      /&gt;
  
                    &lt;/Grid.Column&gt;
                  &lt;/Grid.Row&gt;
                &lt;/Grid&gt;
              );
            })}
          &lt;/Container&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Search Component:</p>
  
  <pre><code>import React, { Component } from "react";
  import { Form, Input, Button } from "semantic-ui-react";
  export default class Search extends Component {
    state = {
      text: ""
    };
  
    handleChange = e =&gt; {
      this.setState({
        text: e.target.value
      });
    };
  
    handleSubmit = e =&gt; {
      e.preventDefault();
      this.props.searchUsers(this.state.text);
      this.setState({ text: "" });
    };
    render() {
      return (
        &lt;div&gt;
          &lt;Form onSubmit={this.handleSubmit}&gt;
            &lt;Input
              type="text"
              name="text"
              placeholder="Search Here"
              value={this.state.text}
              onChange={this.handleChange}
            /&gt;
            &lt;Button type="submit" value="Search"&gt;
              Search
            &lt;/Button&gt;
          &lt;/Form&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>JSON data (API) would be like:</p>
  
  <pre><code>{
    "item1": [
      {
        "id": "2c963f",
        "firstName": "ABC",
        "lastName": "FED",
        "experience": 0,
          "salary": "20000",
           "email": "abc@gmail.com",
  },
  
  {
        "id": "2c963g",
        "firstName": "DEC",
        "lastName": "POI",
        "experience": 0,
          "salary": "15000",
           "email": "dec@gmail.com",
  }
  
  ]
  
  }
  
  
  </code></pre>
  
  <p>Can any one help me in fixing the search bar for the User component?</p>