How to make my search bar in react native working?

Question

I am learning react native by myself. I try to create a research bar but nothing seems to work. I know how to get one element from my data list, but I don't understand why it is not working and how to make it work properly. To be more specific I have a list of farmer and I want to filter them based on the city they work.

My code is :

import React from 'react'
import { FlatList, View, TextInput, Button, StyleSheet } from 'react-native'
import { ListItem, SearchBar } from 'react-native-elements';
import data from '../Helpers/FarmersData.js'
import FarmerItem from './FarmerItem'
import { registerRootComponent } from 'expo';

// return data.filter(function (e){return e.City == text}).map(element => <FarmerItem farmer={element} key={element.id} /> );

class Search extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
          farmers: [],
          searchedText: "" 
        }
    }

    _searchTextInputChanged(text) {
        this.setState({ searchedText: text })
    }

    _loadFarmer() {


        if (this.state.searchedText.length > 0) { // Seulement si le texte recherché n'est pas vide
            data.filter(e => e.City == this.state.searchedText).map(element => <FarmerItem farmer={element} key={element.id} /> ).then(data => {
              this.setState({ element: data.results })
          })          
        }
    }

    render() {
        return (
            <View style={styles.main}>
                <TextInput style={styles.textinput} placeholder='Nom du maraicher'/>
                <Button title='Rechercher' onPress={() => {this._loadFarmer()}}/>
                {data.map(element => <FarmerItem farmer={element} key={element.id} /> )} 

            </View>
        );
    }
}

I followed lot of tutorial, but nothing seems to work. I am completely despair. It is certainly something easy but for a non-developer like me, it's kinda difficult. I hope someone can help! Thank you in advance and sorry for my bad english. :)

Answer 1

Step 1 : in constructor we are set our all farmers to farmers

Step 2 : TextInput has onChangeText so we can use our text directly like you show in

Step 3 : in _searchTextInputChanged we can access our text so we are filtering our text with our farmers data.

You can see if we have farmers with city then we are assign it to our state else we are set our all data to state as you can see in _searchTextInputChanged

import React from 'react'
import { FlatList, View, TextInput, Button, StyleSheet , Text } from 'react-native'
import { ListItem, SearchBar } from 'react-native-elements';
import data from '../Helpers/FarmersData.js'
import FarmerItem from './FarmerItem'
import { registerRootComponent } from 'expo';

// return data.filter(function (e){return e.City == text}).map(element => <FarmerItem farmer={element} key={element.id} /> );

class Search extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
          farmers: data ,
          searchedText: "" // Initialisation de notre donnée searchedText dans le state
        }
    }

    _searchTextInputChanged = async (text) => {
        const newData = await data.filter(e => e.City.toLowerCase() === text.toLowerCase() );

        //change your logic as per your requirement 
        if( newData.length > 0 ){
        this.setState({farmers : newData})
        }else{
        this.setState({farmers : data })
        }
    }

    render() {
        return (
          <>
            <View style={styles.main}>
                <TextInput style={styles.textinput} onChangeText = {(text) => this._searchTextInputChanged(text)} placeholder='Nom du maraicher'/>
                {this.state.farmers.map(element => <FarmerItem farmer={element} key={element.id} /> )}

            </View>
            </>
        );
    }
}

// Components/Search.js
const styles = StyleSheet.create({
    main: {
        flex:1,
        marginTop:30,
        backgroundColor:'white'
    },
    textinput: {
        marginLeft: 5,
        marginRight: 5,
        height: 50,
        borderColor: '#86d972',
        borderWidth: 1,
        paddingLeft: 5
    }
  })

export default Search

Answer 2

Thisd is a working solution :

snack-expo Do check once with abc as input , for more doubts i can clarify:

import React from 'react'
import { FlatList, View, TextInput, Button, StyleSheet,Text } from 'react-native'
import { ListItem, SearchBar } from 'react-native-elements';
// import data from '../Helpers/FarmersData.js'
// import FarmerItem from './FarmerItem'
import { registerRootComponent } from 'expo';

// return data.filter(function (e){return e.City == text}).map(element => <FarmerItem farmer={element} key={element.id} /> );

export default class App extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
          farmers: [],
          searchedText: "" ,
          data:[{
            name:'a',
            city:'ABC'
          },{
            name:'b',
            city:'WOW'
          }
          ],
          dataShown:[{
            name:'a',
            city:'ABC'
          },{
            name:'b',
            city:'WOW'
          }]
        }
    }

    _searchTextInputChanged = (text) => {

        let newDataF = [];
        this.state.data.map((e) => {
          if(e.city.toLowerCase() == text.toLowerCase())
          {
            newDataF.push(e)
          }
        })


        this.setState({ searchedText: text, dataShown:newDataF })
    }


    render() {

        return (
            <View style={{marginTop:100}} >
                <TextInput onChangeText={this._searchTextInputChanged} placeholder='Nom du maraicher'/>
                <Button title='Rechercher' onPress={() => {this._loadFarmer()}}/>
                {this.state.dataShown.map(element => <Text>{element.city}</Text> )} 

            </View>
        );
    }
}