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 es 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>
    );
  }
}

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 es 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>
    );
  }
}

• javascript
• reactjs
• react-native

2 Answers 2

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 });
 }

You could also simplify your schoolChange function:

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