CODEWITHSUNDEEP
ajaxreactjs
user5323957
user5323957

Reputation: 552

Uncaught TypeError: Cannot read property 'map' of undefined On Reactjs

While Calling To API With url https://itunes.apple.com/search?term=fun' On Reactjs i Got Error Which Says Uncaught TypeError: Cannot read property 'map' of undefined On Reactjs And I'm Not Sure What To DO Now Any Help?

//main app component
var App = React.createClass({
    //initial state
    getInitialState:function(){
        return{
            searchResults:[]
        }
    },
    //component mount
    componentDidMount(){
        this.search('https://itunes.apple.com/search?term=fun');
    },
    //state change
    showResult:function(response){
        this.setState({
            searchResults:response.result
        })
      //  console.log(response);
    },
    //ajax call
    search:function(URL){
        $.ajax({
            type:"GET",
            dataType:"jsonp",
            url:URL,
            success:function(response){
                this.showResult(response);
            }.bind(this)
        });
    },
    createAjax:function(){
        var query = ReactDOM.findDOMNode(this.refs.query).value;
        var category = ReactDOM.findDOMNode(this.refs.category).value;
        var URL      = 'https://itunes.apple.com/search?term=' + query +'&country=us&entity=' + category;
        this.props.search(URL)
    },
    render:function(){
        return(
            <div>
                <SearchBox search={this.search}/>
                <Result searchResults={this.state.searchResults}/>
            </div>
        );
    }
});
//searchbox component
var SearchBox = React.createClass({
    render:function(){
        return(
            <div>
                <input type="text"/>
                <select>
                    <option value="software">Apps</option>
                    <option value="movie">Films</option>
                </select>
                <input type="submit" value="Send" onClick={this.createAjax}/>
            </div>
        );
    }
});
var Result = React.createClass({
    render:function(){
        var resultItems = this.props.searchResults.map(function(result){
            return <ResultItem key={result.trackId} trackName={result.trackName}/>
        });
        return(
                <ul>
                    {resultItems}
                </ul>
        );
    }
});
var ResultItem = React.createClass({
    render:function(){
        return(
                <li>{this.props.trackName}</li>
        );
    }
});
ReactDOM.render(
    <App />,
    document.querySelector("#app")
);
<!DOCTYPE html>
<head>
    <meta charset="UTF-8" />
    <title></title>
</head>
<div id="app"></div>
<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</body>
</html>

Upvotes: 2

Views: 1431

Answers (1)

Oleksandr T.
Oleksandr T.

Reputation: 77502

In response there is property results, but not result

this.setState({
  searchResults: response.results
})

Example

Upvotes: 1

Related Questions