CODEWITHSUNDEEP
javascripthtmlreactjsreactjs-native
MaxWorld
MaxWorld

Reputation: 757

ReactJS toLowerCase is not a function

I am doing a comparison by converting my text to lowercase and comparing its index to -1, in order to have some value to the particular field in ReactJS, but I am getting this error in JavaScript console:

Uncaught TypeError: props.filterText.toLowerCase is not a function

var props = this.props;
var rows = this.props.episodes
    .filter(function(episode){
        return episode.title.toLowerCase().indexOf(props.filterText.toLowerCase()) > -1;
    })
    .map(function(episode){
       return <EpisodeRow key={episode.title} episode={episode}/>
    });

Upvotes: 18

Views: 69553

Answers (3)

To&#224;n Nguyễn
To&#224;n Nguyễn

Reputation: 1

I think I found the problem :)

props.filterText is undefined. => The filterText:"" must be declared in the state before putting in props

Upvotes: 0

HoldOffHunger
HoldOffHunger

Reputation: 20861

I think Adam's answer from the comments is actually correct, and turned out to solve my problem :

.filter(function(episode){
    if(episode.title) {
        return episode.title.toLowerCase().indexOf(props.filterText.toLowerCase()) > -1;
    } else {
        return '';
    }
})

Upvotes: -1

ThePatelGuy
ThePatelGuy

Reputation: 1890

Looks like Chris's comment is the correct answer:

If title is a string, use toString() before toLowerCase(): 

return episode.title.toString().toLowerCase().indexOf(props.filterText.toString().toLowerCase()) > -1;

Upvotes: 32

Related Questions