Error Uncaught TypeError: numbers.map is not a function

Question

I'm working with reactjs and cannot seem to prevent this error when trying to map an array

import React, { Component } from 'react';


function Tasks(props) {
  const numbers = props.items;
  
  const listItems = numbers.map((number) =>
    <li>{numbers}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

export default Tasks;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Changing the numbers constant to a defined value (e.g. ["test1","test2"]) fixes it but that's not I want.

Answer 1

Try console logging numbers, I want to guess it should be something like this you should do 'numbers.numbers.map' - reason is that I'm guessing props.item is an array called numbers, so you're not deep matching I'd say. But first let's see the console's log.