CODEWITHSUNDEEP
javascriptreactjsreact-native
Adokiye Iruene
Adokiye Iruene

Reputation: 870

Array filter not working for state

I have an array which is a state, The values of the state show in a view, I also have a text view, I want to make the value of the text input change the values of the state so that the values in the state view will change, but it doesn't change the values in the state view, i.e if i type a, the view doesn't change, if i type ab it comes back with an error saying undefined is not an object(evaluating item.toLowerCase) Please where may I may be wrong

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      schools: [
        "Abubakar Tafawa Balewa University, Bauchi",
        "Ahmadu Bello University, Zaria",
        "Bayero University, Kano",
      ],
    };
    this.handleChange = this.handleChange.bind(this);
    this.schoolChange = this.schoolChange.bind(this);
  }

  schoolChange(text) {
    for (let i = 0; i < this.state.schools.length; i++) {
      console.log(this.state.schools[i]);
    }
    let c = this.state.schools.map(item => item.toLowerCase(item));
    let b = c.filter(item => item.indexOf(text) > -1);
    let d = b.map(item => item.toUpperCase(item));
    console.log(d);
    var len = d.length;
    for (let i = 0; i < len; i++) {
      let row = d[i];
      this.setState(
        prevState => ({
          schools: [...prevState.schools, row],
        }),
        console.log(this.state.schools[i]),
      );
    }
  }

  handleChange(text) {
    this.setState({ text }, () => {
      this.schoolChange(this.state.text);
    });
  }

  render() {
    const schools = this.state.schools.map((school, index) => (
      <Text style={styles.text}>{school}</Text>
    ));

    return (
      <View>
        <TextInput
          placeholder="Search"
          value={this.state.text}
          onChangeText={text => this.handleChange(text)}
        />
        <ScrollView overScrollMode={"never"} keyboardShouldPersistTaps="always">
          {schools}
        </ScrollView>
      </View>
    );
  }
}

Upvotes: 0

Views: 5796

Answers (2)

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22885

It is because you are overriding schools array and now there is no data to filter on. Your source of data is this.state.schools and on filter, you are replacing schools array with new data, maybe empty array so now you don't have a way to get your data back to filter. So instead of keping your source data in state, keep it in some global variables or in this.schools so updating state will not change the source

Keep a copy of data. YOu don't need to setState in loop. SImply calculate data and then setState.

constructor(props) {
    super(props);
        this.schools = [
                   "Abubakar Tafawa Balewa University, Bauchi",
                   "Ahmadu Bello University, Zaria",
                   "Bayero University, Kano"
                ];
        this.state = {
                schools: this.schools
        }

    this.handleChange = this.handleChange.bind(this);
}
  
 handleChange(text){
     const schools = this.schools.filter(name => name.toLowerCase().indexOf(text.toLowerCase()) > -1);
     this.setState({ schools });
 }

Upvotes: 4

Peter Nagy
Peter Nagy

Reputation: 136

You could also simplify your schoolChange function: 

schoolChange(text){
     const schools = this.schools.filter(school => school.toUpperCase().includes(text.toUpperCase()));
     this.setState({
       schools,
     });
 }

Upvotes: 1

Related Questions