Return React component from mapping an array

Question

import React from 'react';
import { Map } from 'react-feather';

const details = [
  {
    title: 'location',
    icon: <Map />,
    meta: 'foo',
  },
  { title: 'type', icon: <Map />, meta: 'type' },
  { title: 'duration', icon: <Map />, meta: 'duration' },
  { title: 'date', icon: <Map />, meta: 'date' },
  { title: 'time', icon: <Map />, meta: 'time' },
];

const DetailList = () => {
  return (
    <ul>
      {details.map(item => (
        <li>
          <div>
            <div>{item.icon}</div>
            <div>{item.meta}</div>
          </div>
        </li>
      ))}
    </ul>
  );
};

export default DetailList;

Objective: To map an array and display icon along with other information. However I bumped into error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I don't think there is any problem with the import from react-feather. Because I'm able to use it with <div><Map /></div> but not in mapping and render from the array.

Does anyone know what is my problem? Or am I missing anything?

What specific line is it complaining about? Also, do you happen to be using webpack? Looking at the react-feather package info I noticed it warns that with webpack you have to use imports like import Map from 'react-feather/dist/icons/map' instead. — ecraig12345
– ecraig12345, Commented Apr 13, 2018 at 4:49
The above code seems correct. However, why are you returning a <div> in a <li> — Olumide
– Olumide, Commented Jul 13, 2021 at 4:20

Josh McMillan · Accepted Answer · 2018-04-13 02:00:02Z

2

You probably want something like this:

import React from 'react';
import { Map } from 'react-feather';

const details = [
  {
    title: 'location',
    icon: Map,
    meta: 'foo',
  },
  { title: 'type', icon: Map, meta: 'type' },
  { title: 'duration', icon: Map, meta: 'duration' },
  { title: 'date', icon: Map, meta: 'date' },
  { title: 'time', icon: Map, meta: 'time' },
];

const DetailList = () => {
  return (
    <ul>
      {details.map(({ icon, meta }) => (
        <li>
          <div>
            <div><icon /></div>
            <div>{meta}</div>
          </div>
        </li>
      ))}
    </ul>
  );
};

export default DetailList;

I'm not sure that JSX handles passing of initialized components particularly well.

answered Apr 13, 2018 at 2:00

Josh McMillan

7343 silver badges8 bronze badges

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

1 Comment

Alex McMillan Over a year ago

You might wanna mention that this is probably not a good solution. Also, nice name ;)

Artur Kulig · Accepted Answer · 2018-04-13 11:55:24Z

0

I don't think there is any problem with [...]

Please make sure before posting a question. Check if you have Map in scope. Your component should work.

btw: in component like this you can map your array of objects to array of React elements once, not on every render of DetailList.

answered Apr 13, 2018 at 11:55

Artur Kulig

5614 silver badges4 bronze badges

Collectives™ on Stack Overflow

Return React component from mapping an array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related