JSX not rendering after .map in React

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??

Is this a function?

Håken Lid
– Håken Lid

2018-08-10 20:54:04 +00:00
Commented Aug 10, 2018 at 20:54 — Håken Lid
– Håken Lid, Commented Aug 10, 2018 at 20:54
Yes it did @Tholle ! Thank you very much

kcurtis113
– kcurtis113

2018-08-11 01:19:13 +00:00
Commented Aug 11, 2018 at 1:19 — kcurtis113
– kcurtis113, Commented Aug 11, 2018 at 1:19
Great! No problem. Welcome to Stack Overflow!

Tholle
– Tholle

2018-08-11 01:19:31 +00:00
Commented Aug 11, 2018 at 1:19 — Tholle
– Tholle, Commented Aug 11, 2018 at 1:19

Tholle · Accepted Answer · 2018-08-10 20:53:43Z

4

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>
    );
  });
}

answered Aug 10, 2018 at 20:53

Tholle

113k22 gold badges209 silver badges198 bronze badges

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

Collectives™ on Stack Overflow

JSX not rendering after .map in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related