Can't map over array in React

Question

I'm passing an array (data) to the Segment component via a prop. But then I can't map over data. I'm sure it's a really obvious mistake but I just don't see it :(

import React from 'react';
import SegmentLine from './SegmentLine';

const Segment = ({ data }) => {
  console.log(data);

  return data && data.map((line, i) => <SegmentLine key={i} data={line} />);
};

export default Segment;

The console.log is this:

Any help is greatly appreciated! Thanks in advance :)

Answer 1

First, I think you have extra curly braces before the export.

Second, you should remove the curly braces between data.map.

return (
  data &&
  data.map((line, i) => {
    return <SegmentLine key={i} data={line} />
  })
)

Answer 2

You can either add a little improvement doing

return (
  data &&
  data.map((line, i) => (
    <SegmentLine key={i} data={line} />
  ));