Breaking News: Grepper is joining You.com. Read the official announcement!

add filter category to react native flatslit

Chris Lopes answered on June 5, 2022 Popularity 1/10 Helpfulness 1/10

answer add filter category to react native flatslit

add filter category to react native flatslit

Comment

import React, { Component } from "react";
import { View, Text, FlatList, Button } from "react-native";
import { ListItem, SearchBar } from "react-native-elements";
 
class FlatListDemo extends Component {
 
  constructor(props) {
    super(props); 
  
    this.state = { 
      loading: false,   
      data: [],
      temp: [],
      error: null,
      search: null
    };
  }
  
  componentDidMount() {
    this.getData();
  }
 
   getData = async ()  => {
    const url = `https://jsonplaceholder.typicode.com/users`;
    this.setState({ loading: true });
      
     try {
        const response = await fetch(url);
        const json = await response.json();
        this.setResult(json);
     } catch (e) {
        this.setState({ error: 'Error Loading content', loading: false });
     }
  };
 
  setResult = (res) => {
    this.setState({
      data: [...this.state.data, ...res],
      temp: [...this.state.temp, ...res],
      error: res.error || null,
      loading: false
    });
  }
 
  renderHeader = () => {
      return <SearchBar placeholder="Search Here..."
          lightTheme round editable={true}
          value={this.state.search}
          onChangeText={this.updateSearch} />; 
  }; 
 
  updateSearch = search => {
        this.setState({ search }, () => {
            if ('' == search) {
                this.setState({
                    data: [...this.state.temp]
                });
                return;
            }
             
            this.state.data = this.state.temp.filter(function(item){
                return item.name.includes(search);
              }).map(function({id, name, email}){
                return {id, name, email};
            });
        });
  };
 
  render() {
    return (
      this.state.error != null ?
        <View style={{ flex: 1, flexDirection: 'column',justifyContent: 'center', alignItems: 'center' }}>
          <Text>{this.state.error}</Text>
          <Button onPress={
            () => {
              this.getData();
            }
          } title="Reload" />
        </View> : 
        <FlatList
            ListHeaderComponent={this.renderHeader}
            data={this.state.data}
            keyExtractor={item => item.email}
            renderItem={({ item }) => (
            <ListItem
                roundAvatar
                title={`${item.name}`}
                subtitle={item.email}
            />
        )}
      />
    );
  }
}
 
export default FlatListDemo;

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: www.coderzheaven.com

Tags: add-filter javascript react-native

Link to this answer
Share Copy Link

Contributed on Jun 05 2022

Chris Lopes

0 Answers Avg Quality 2/10

add filter category to react native flatslit

Contents

More Related Answers

add filter category to react native flatslit

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.