2

I'm a newbie in React. I'm creating a little app that has users and I need to create a searchbar that will look for users if I type two or three lettters of users name. But obviously I stuck. So any help will be nice. Thanks in advance

import React, { Component } from 'react'
 class FilterForm extends Component {   

 state = {
    query: '',
    user: [],
    searchString:[]   
   }

  handleInputChange = (e) => {
    this.setState ({
      query:e.target.value
    } ,()=>{
        this.filterArray();
      })   
    }   

  getData = () => {
    fetch(`http.//localhost:3000/login`)
    .then(response => response.json())
    .then(responseData => {
      //console.log(responseData)
      this.setState ({
        user:responseData,
        searchString: responseData
      })
    })   
   }

   filterArray = () => {
    let searchString = this.state.query;
    let responseData = this.state.user;

  if(searchString.length > 0){
  //console.log(responseData[i].first_name)
   searchString = responseData.filter(searchString);   

 this.setState({ responseData })
  }   
 }   

componentWillMount() {
  this.getData();   
}

   render() {
      return(
        <div className="searchform">
         <form>
          <input 
            type="text"
           id="filter"
            placeholder="Search for user..."
           onChange={this.handleInputChange}/>
          </form>
          <div>{this.state.searchString.map(i => <p>{i.first_name}</p>)} 
           </div>
      </div>
      )   
    } 
   }

export default FilterForm

And this is my App.js

import React  from 'react';
import PeopleList from "./components/PeopleList"
import FilterForm from "./components/FilterForm"
//import { search } from "./Utils"
//import UserData from "./components/UserData";
//import SearchBox from "./components/SearchBox"
import './App.css';

class App extends React.Component {

  render() {
    return (
      <React.Fragment>
        <div>
          <FilterForm />
          <PeopleList />
        </div>

      </React.Fragment>
    );
  }
}
export default App

And when I start typing something in searchbar I get an error:

enter image description here

Roy.B
  • 2,076
  • 14
  • 23
Ivan M
  • 147
  • 1
  • 2
  • 8
  • 1
    Please fix the formatting of your code and include the full sample. I am seeing methods like `this.getData()` which are not included – Ryan Castner Jul 28 '19 at 12:29
  • Looks like you need to clean up your code a bit. `searchString = responseData.filter(searchString);` filter callback must be a function, but in your case, you are passing it a string value, like how will filter know what it is supposed to do with `searchString`? – Sparsh Jul 28 '19 at 12:41
  • Tnx for correcting my input. Well i cant say that i full understand this. Its quite a bit heavy to understand whats really going on in this code. I didnt write this code by myself, also find a piece of it on another question in stackoverflow. Obviously I have to return few steps back, and start with simplier code. Thanks everyone for the effort. – Ivan M Jul 28 '19 at 14:03

1 Answers1

1

I edit your post and did some indentation, and to your question, your problem is in fillterArray, this is not how you use filter method and you are setting state to user witch is not relevant to the search.

try this:

filterArray = () => {
  const { query, user } = this.state;

  if(query.length > 0){
   const searchResult = searchString.filter((el, i) => el[i].first_name.includes(query);

   this.setState({ searchString: searchResult })
  }   
 }

more info about filter method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Roy.B
  • 2,076
  • 14
  • 23