JSX not rendering after .map in React - reactjs

Question

I am fetching a JSON file and trying to render the data from it. Everything shows up great when I console.log it but the JSX is not being rendered to the page. I was using forEach and read that it should be map instead but that doesn't fix my problem. Here's my code:
getPromoDetails(data) {
data = this.state.data;
Object.keys(data || {}).map(function(key) {
console.log("Promo ID: ",data[key].cm_ID)
console.log("Title: ",data[key].cm_title)
console.log("State: ",data[key].state)
console.log("Status: ",data[key].status)
console.log("Last Modified on: ",data[key].cm_lastmodified)
return
<div className="col-xs-12">
<div className="col-xs-3">
<img src={`https://link.com/thumbnail_${data[key].cm_ID}.jpg`}/>
</div>
<div className="col-xs-9">
<span className="col-xs-12"> {data[key].cm_title}</span>
<span>On: {data[key].cm_on}</span>
<span>State: {data[key].state}</span>
<span>Status: {data[key].status}</span>
<span>Last Modified: {data[key].cm_lastmodified}</span>
</div>
</div>
});
}
Any advice??

Answer 1

You are not returning the array that is the result of the map. You also have to make sure the JSX is on the same line as the return statement, or undefined will be returned.
getPromoDetails() {
const { data } = this.state;
return Object.keys(data || {}).map(function(key) {
return (
<div className="col-xs-12" key={key}>
<div className="col-xs-3">
<img src={`https://link.com/thumbnail_${data[key].cm_ID}.jpg`} />
</div>
<div className="col-xs-9">
<span className="col-xs-12"> {data[key].cm_title}</span>
<span>On: {data[key].cm_on}</span>
<span>State: {data[key].state}</span>
<span>Status: {data[key].status}</span>
<span>Last Modified: {data[key].cm_lastmodified}</span>
</div>
</div>
);
});
}