Filtering JSON in React

Question

I'm loading some JSON data using FETCH. I'm trying to add/create a simple filtering functionality on the content displayed.

I'm getting this error:

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined

Any idea what could be causing this error?

This my code so far:

let Table = React.createClass({
    getInitialState: function(){
        return { 
            accounts: [{
                "product": "Fixed Saver", 
                "interestRate": 2.20,
                "minimumDeposit": 500,
                "interestType": "Fixed"
            }],
            searchString: ''
        }
    },
    componentDidMount: function(){
        fetch('http://localhost:8888/table/json/accounts.json')
            .then(response => {
                return response.json()
            })
            .then(json => {
                this.setState({accounts: json})
            });
    },
    handleChange: function(e){
        this.setState({searchString:e.target.value});
    },
    render: function(){
        var libraries,
        libraries = this.state.accounts,
        searchString = this.state.searchString.trim().toLowerCase();

        if(searchString.length > 0){
            libraries = libraries.filter(l => {
                return l.name.toLowerCase().match( searchString );
            });
        }

        return (
            <div className="container">

            <input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here" />

                <ul className="header clearfix">
                    <li>Product</li>
                    <li>Interest rate</li>
                    <li>Minimum deposit</li>
                    <li>Interest type</li>
                </ul>

                {libraries.map(l => {
                return (
                    <div className="account clearfix" key={l.id}>
                        <div className="product">{l.product}</div>
                        <div>{l.interestRate} %</div>
                        <div>£ {l.minimumDeposit}</div>
                        <div>{l.interestType}</div>
                    </div>
                    )
                })} 
            </div>
        )
    }
});

let App = React.createClass({
    render: function(){
        return(
            <Table />
        );
    }
});

ReactDOM.render( <App />, document.getElementById('table') );

JSON

[
   {
      "id": 1,
      "product": "Fixed Saver", 
      "interestRate": 2.20,
      "minimumDeposit": 500,
      "interestType": "Fixed"
   },
   {
      "id": 2,
      "product": "Fixed Saver", 
      "interestRate": 1.50,
      "minimumDeposit": 0,
      "interestType": "Tracker"
   },
   {
      "id": 3,
      "product": "Offset Saver", 
      "interestRate": 1.8,
      "minimumDeposit": 1000,
      "interestType": "Fixed"
   }
]

can you verify accounts get populated in console?My guess is your fetch doesn't bind to the component itself — kasperite
– kasperite, Commented Sep 22, 2016 at 3:00

Hieu Tran · Accepted Answer · 2016-09-22 03:36:24Z

12

Seem that you got the error from this line

libraries = libraries.filter(l => {
  return l.name.toLowerCase().match( searchString );
});

Because of l.name is undefined. You can check again your JSON data. It doesn't have name attribute, seem that it is product.

You should not modify your state directly by: libraries = libraries.filter... State should be updated by setState function. In this case you should create temporary variable to display the results instead of directly use libraries variable. I believe if your sample is worked, you only may search for the first time and next time the results will be only in your last search results, though.

edited Sep 22, 2016 at 3:36

answered Sep 22, 2016 at 3:30

Hieu Tran

3644 silver badges8 bronze badges

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

1 Comment

John Over a year ago

Hi Hieu, you are right it should be product. Thanks a lot.

Collectives™ on Stack Overflow

Filtering JSON in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related