Reactjs and Superagent pt3 - reactjs

Question

I'm making progress on this app. I'm able to access and render the list of ingredients now I need to do the same with the name of the recipe. Postman indicates that it is under recipes.body.matches[0].sourceDisplayName. I created another function, similar to what got me the ingredients. Getting the following error...
TypeError: Cannot read property 'map' of undefined
import React from 'react';
import Request from 'superagent';
import _ from 'lodash';
export class Yum extends React.Component {
constructor(){
super();
this.state = {
searchQuery: 'onion',
recipe: {
ingredients: []
}
};
this.search = this.search.bind(this);
this.queryUpdate = this.queryUpdate.bind(this);
}
componentWillMount(){
this.search(this.state.searchQuery);
}
render(){
//const title = 'Onion Soup'; // Get this from somwhere else ?
const {recipe, searchQuery} = this.state; // Get state properties
const displayName = _.get(recipe, 'sourceDisplayName').map((sourceDisplayName) => {
return (<h4>{displayName}</h4>)
});
const listItems = _.get(recipe, 'ingredients', []).map((ingredient, sourceDisplayName) => {
return (<h5>{ingredient}</h5>);
});
return(
<div>
<input onChange={this.queryUpdate} type="text" value={searchQuery} />
<h4>{displayName}</h4>
<ul>
<li>{listItems}</li>
</ul>
</div>
)
}
queryUpdate(event) {
const searchQuery = event.target.value; // Get new value from DOM event
this.setState({searchQuery}); // Save to state
this.search(searchQuery); // Search
}
search(searchQuery) {
const url = `http://api.yummly.com/v1/api/recipes?_app_id=5129dd16&_app_key=9772f1db10ba433223ad4e765dc2b537&q=${searchQuery}&maxResult=1`
Request.get(url).then((response) => {
this.setState({
recipe: response.body.matches[0]
});
});
}
}
export default Yum;
Any suggestions?