React map function issue

Question

I am new to React and JS.

I have this piece of code but 'rows' is undefined in console.log output. I am guessing my map function is incorrect but I can't figure out why.

const stubData = [
  { id: "435879430589041", customer: "jdus", status: "OK" },
  { id: "435879430589042", customer: "jdfr", status: "OK" },
  { id: "435879430589043", customer: "jdnl", status: "pending" },
  { id: "435879430589044", customer: "wsi", status: "config" },
  { id: "435879430589045", customer: "tkmaxx", status: "pending" },
];

const Rows = () => {
  const rows = stubData.map((c,i) => {
    (<tr key={i} value={c}>
      <td>{c.id}</td>
      <td>{c.customer}</td>
      <td>{c.status}</td>
    </tr>)
  }); 
  console.log(rows)
  return <tbody>{rows}</tbody>;
};

const ListIntegrations = props => {
  return (
    <table className="table table-hover">
      <Headers />
      <Rows />
    </table>
  );

Headers returns headers perfect.

Nicholas Tower · Accepted Answer · 2019-10-02 09:06:49Z

3

You're not returning anything in the map. Either add a return statement:

  const rows = stubData.map((c,i) => {
    return (<tr key={i} value={c}>
      <td>{c.id}</td>
      <td>{c.customer}</td>
      <td>{c.status}</td>
    </tr>)
  });

...or delete the curly brackets, thus making the return implicit:

  const rows = stubData.map((c,i) => 
    (<tr key={i} value={c}>
      <td>{c.id}</td>
      <td>{c.customer}</td>
      <td>{c.status}</td>
    </tr>)
  );

answered Oct 2, 2019 at 9:06

Nicholas Tower

87k10 gold badges115 silver badges127 bronze badges

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

Comments

Thakur Karthik · Accepted Answer · 2019-10-02 09:06:54Z

1

You are not returning from map

stubData.map((c,i) => {
    (<tr key={i} value={c}>
      <td>{c.id}</td>
      <td>{c.customer}</td>
      <td>{c.status}</td>
    </tr>)
  });

change it as

stubData.map((c,i) => {
    return (<tr key={i} value={c}>
      <td>{c.id}</td>
      <td>{c.customer}</td>
      <td>{c.status}</td>
    </tr>)
  });

answered Oct 2, 2019 at 9:06

Thakur Karthik

3,6483 gold badges17 silver badges27 bronze badges

Comments

ibtsam · Accepted Answer · 2019-10-02 09:41:03Z

0

As you are using arrow function as a callback to map. If you don't have curly braces {} arrow function implicitly returns

const rows = stubData.map((c,i) => 
(<tr key={i} value={c}>
  <td>{c.id}</td>
  <td>{c.customer}</td>
  <td>{c.status}</td>
</tr>)
);

Or if you use curly braces you need to return explicitly

const rows = stubData.map((c,i) => {
return
(<tr key={i} value={c}>
  <td>{c.id}</td>
  <td>{c.customer}</td>
  <td>{c.status}</td>
</tr>)
});

answered Oct 2, 2019 at 9:41

ibtsam

1,7001 gold badge11 silver badges10 bronze badges

Collectives™ on Stack Overflow

React map function issue

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related