Issue with Creating a Search Bar with React

by Patrick Hayden   Last Updated August 14, 2019 18:26 PM

I'm trying to create a search bar that will load a list of user's names from an api when input is added to the search bar and im getting an error. im not quite sure what to make the parameters of the .filter method. or if im even using the correct method. I thought about using lodash _.filter but not sure how or where to implement that. im new to react so keep that in mind! id be very thankful for any suggestions

import React, { Component } from "react";
import ReactDOM from "react-dom";
import './App.css'

class App extends Component {
  constructor() {
    super();
    this.state = {
      people: [],
      search: ''
    };
  }

  componentDidMount() {
    fetch("https://randomuser.me/api/?page=3&results=10&seed=abc")
      .then(results => results.json())
      .then(data => this.setState({ people: data.results }));
  }
  updateSearch(event) {
    this.setState({ search: event.target.value })
  }
  render() {

    let filteredPeople = this.state.people.filter(
      (people) => {
        return people.data.results.indexOf(e.target.value) !== -1;
        //or maybe use .includes
      }

    );
    return (
      <div className="card">
        <div className="firstlast">
          {filteredPeople.map(people => (
            <div id="names">{people.name.first} {people.name.last}</div>
          ))}
        </div>
        <input type="text" value={this.state.search} onChange={this.updateSearch.bind(this)} />
      </div>
    );
  }
}


export default App;

error message:

Error in /~/App.js (43:32) Cannot read property 'results' of undefined

Tags : reactjs


Related Questions


React Konva Blend Modes

Updated November 07, 2018 13:26 PM

Async requests with data from store

Updated June 21, 2015 23:11 PM

When to use Dispatcher in React Application

Updated October 20, 2018 07:26 AM