CODEWITHSUNDEEP
reactjs
NiceRice
NiceRice

Reputation: 39

Can't map over array in React

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:

enter image description here

Any help is greatly appreciated! Thanks in advance :)

Upvotes: 0

Views: 127

Answers (2)

Felipe Louren&#231;o
Felipe Louren&#231;o

Reputation: 36

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

Upvotes: 2

ValenciaHQ
ValenciaHQ

Reputation: 385

You can either add a little improvement doing 

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

Upvotes: 1

Related Questions