CODEWITHSUNDEEP
reactjsreact-native
Alwaysblue
Alwaysblue

Reputation: 11830

Unable to perform search

I created small search function for my App but it doesn't seem to be working.

First I created a constructor in which CurrencyDisplay holds the array of list I want to display

constructor() {
        super() 
        this.CurrencyDisplay = CurrencyDisplay
    }

Which I am mapping it and calling like this 

{ this.CurrencyDisplay.map(data => {
                  return (
                  <TouchableOpacity>
                     <Text  style={dataLong}> {data["long"]}</Text>
                     <Text  style={dataShort}>{data["short"]}</Text>
                 </TouchableOpacity>)})}

Then I have input element where user is suppose to search 

<TextInput
   style={textInput}
   placeholder="Search Currnecy"
   onChangeText={(text) => this.onSearch(text)} />

and my onSearch looks like this 

onSearch = (text) => {
        if (text = "") {
         this.CurrencyDisplay = []
         this.CurrencyDisplay = CurrencyDisplay
          this.setState({searchCurrency: false})
        } else {     
          if (!this.state.searchCurrency) {
           this.setState({searchCurrency: true}) 
           }
         this.CurrencyDisplay = []
         for (let i=0; i<CurrencyDisplay.length; i++) {
          let currencyVal = CurrencyDisplay[i]["short"]
          if (currencyVal.indexOf(text) > - 1) {
            this.CurrencyDisplay.push({
             no: {i},
             short: CurrencyDisplay[i]["short"],
             long: CurrencyDisplay[i]["long"] 
            })
            console.log(this.CurrencyDisplay)
          }
        }
      }
    }

In the above notice console.log(this.CurrencyDisplay) This incrementally add everything to the array 

CurrencySelection.js:60 [{…}]

CurrencySelection.js:60 (2) [{…}, {…}]

CurrencySelection.js:60 (3) [{…}, {…}, {…}]

CurrencySelection.js:60 (4) [{…}, {…}, {…}, {…}]

CurrencySelection.js:60 (5) [{…}, {…}, {…}, {…}, {…}]

Can anyone tell me what could I be doing wrong?

Upvotes: 0

Views: 33

Answers (2)

akcoban
akcoban

Reputation: 973

There's one equal mark at here. Should be two or three. One equal mark only declare a new text variable with value "".

onSearch = (text) => {
    if (text = "") {

change it to that:

onSearch = (text) => {
    if (text === "") {

And after, to render your array, you should use state. If you don't use, it will not rerender on screen after the filtering.

Upvotes: 1

Rodrigo Brito
Rodrigo Brito

Reputation: 378

The list will update on render if any state change. If you put the result on a global array, it don't trigger the render(). The best option is store the result in the component state.

On search:

this.setState({ CurrencyDisplay: mylist })

On render:

{ this.state.CurrencyDisplay.map(data => {
    return (
        <TouchableOpacity>
            <Text  style={dataLong}> {data["long"]}</Text>
            <Text  style={dataShort}>{data["short"]}</Text>
        </TouchableOpacity>
    )
})}

Upvotes: 1

Related Questions