Using any form of the Map function with react causes an undefined error

Question

After reducing my code to the simplest of forms it looks like I have an un-resolvable problem with the map function used anywhere in any location.

I know code in examples which runs on Codepen etc doesn't work with create react app project locally, so I'm wondering if there is an issue with the build setup.

I'm new to react, and haven't been actively programming for about 4-5 years, so its very possible I am at fault

Error is the iterator parameter within the map having an undefined value: 'd' below in this and the days worth of writing similar code to find a solution

The code is as follows after reducing it to its simplest form

Code which doesn't work in my build works on codepen.

I've tried props, state class or block variables

I've tried nested functions, as well as => functions

I've tried with different classes different variables, and the error is always exactly the same

import { React, Component } from 'react';

class ProtoList extends Component {
  constructor(props) {
    super(props)
    this.state = {

    };

 }

 render() {
   let data = [{ "name": "test1" }, { "name": "test2" }];

   let listItems = data.map(d =>  
        <span key={d.name}>{d.name}</span>
   )
   return listItems;
 }}

export default ProtoList;

import React from 'react';
import Container from '@material-ui/core/Container';
import { makeStyles } from '@material-ui/core/styles';
import WebHeader from './components/WebHeader';
import WebMain from './components/WebMain';
import WebFooter from './components/WebFooter';
import ProtoList from './components/ProtoList';

const useStyles = makeStyles(theme => ({

  root: {
    minHeight: '500px',
    paddingLeft: '0px',
    paddingRight: '0px',
    backgroundColor: '#001e1c',
  },
}));

export default function App() {
  const classes = useStyles();

  return (
    <ProtoList />
    /*
    <Container className={classes.root}>
      <WebHeader />
      <WebMain />
      <WebFooter />
    </Container>
    */
  );
}

Package:

{
  "name": "telescout-pr2",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.22",
    "@fortawesome/free-brands-svg-icons": "^5.10.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "@material-ui/core": "^4.3.3",
    "@material-ui/icons": "^4.2.1",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "3.1.1",
    "react-vis": "^1.11.7",
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "eslint": "^6.2.2",
    "eslint-plugin-react": "^7.14.3"
  }
}

    TypeError: Cannot read property 'createElement' of undefined
    (anonymous function)
   render() {
    let data = [{ "name": "test1" }, { "name": "test2" }]; 
>   let listItems = data.map(d =>  
        <span key={d.name}>{d.name}</span>
    )
    return listItems;

Answer 1

The createElement method is the primary method React uses to build components, it's undefined because the React object isn't being imported:

import React, { Component } from 'react';

Cheers!

Answer 2

Try this

 render() {
   let data = [{ "name": "test1" }, { "name": "test2" }];

   return (
      <>
         {data.map(d => <span key={d.name}>{d.name}</span>}
      </>
    );
 }}

If you are returning an array of elements, they must be wrapped in a JSX element.

Also, just a tip on React. If you aren't using state, make it a functional component, not a class component.