Rendering views based on change of TextInput in react native

Question

I'm trying to display list of events based on the search query dynamically.

The problem is that I'm always on the initial View and the renderSearch View is never called. PastEvent is a function called from the primary redner of the class by scenemap Please check comments in the code.

  //to display the past events tab
  PastEvents = () => {
    const state = this.state;
    let myTableData = [];
    if (
      state.PastEventList.length !== 0
    ) {
      state.PastEventList.map((rowData) =>
        myTableData.push([
          this.renderRow(rowData)
        ])
      );
    }

    function renderPast() {
      console.log("im in render past") //shows
      return (
        <ScrollView horizontal={false}>
          <Table style={styles.table}>
            {myTableData.map((rowData, index) => (
              <Row
                key={index}
                data={rowData}
                style={styles.row}
                textStyle={styles.rowText}
                widthArr={state.widthArr}
              />
            ))}
          </Table>
        </ScrollView>

      )
    }

    function renderSearch() {
      console.log("im in render search") //never shows even after changing the text
      let searchTable = [];
      if (
        this.state.seacrhPastList.length !== 0
      ) {
        state.seacrhPastList.map((rowData) =>
          searchTable.push([
            this.renderRow(rowData)
          ])
        );
      }

      return (
        <ScrollView horizontal={false}>
          <Table style={styles.table}>
            {searchTable.map((rowData, index) => (
              <Row
                key={index}
                data={rowData}
                style={styles.row}
                textStyle={styles.rowText}
                widthArr={state.widthArr}
              />
            ))}
          </Table>
        </ScrollView>
      )
    }

    return (
      <View style={styles.container}>
        <TextInput placeholder="Search for Events" onChangeText={text => this.onChangeSearch(text)}></TextInput>

        {this.state.searching ? renderSearch() : renderPast()} //please check the onchangeSearch function
      </View>
    )
  }

And the function of change is like that:

 onChangeSearch = (text) => {
    if (text.length > 0) {
      let jsonData = {};
      //get list of events 
      let url = "/api/FindEvents/" + text.toLowerCase()

      ApiHelper.createApiRequest(url, jsonData, true).then(res => {
        if (res.status == 200) {
          this.state.seacrhPastList = res.data
          this.state.searching= true //I was hoping this change will cause the render
        }
      })
        .catch(err => {
          console.log(err);
          return err;
        });
    }
  }

How can i change the events based on the query of the input ? Thank you

Goskula Jayachandra · Accepted Answer · 2020-04-24 12:48:25Z

1

you need to use useState here

declare useState like this:

 PastEvents = () => {
    const [searching, setText] = useState(false);

change the searching state here:

if (res.status == 200) {
          this.state.seacrhPastList = res.data
          setText(true);
        }

Hope this helps!

answered Apr 24, 2020 at 12:48

Goskula Jayachandra

4,2212 gold badges16 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AliAb Over a year ago

That did it! Thank you!

Goskula Jayachandra Over a year ago

Glad to hear that.

Pedro Sánchez · Accepted Answer · 2020-04-24 12:50:40Z

1

You're in a stateless component you shouldn't use "this" in any way, also you can't use state that way, you need to use react hooks

Import { useState } from 'react'

Then you can use state in a functional component

const [state, setState] = useState(initialvalue);

answered Apr 24, 2020 at 12:50

Pedro Sánchez

1361 silver badge7 bronze badges

Collectives™ on Stack Overflow

Rendering views based on change of TextInput in react native

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related