CODEWITHSUNDEEP
arraysreactjsundefinedarray.prototype.map
ap_Eng
ap_Eng

Reputation: 3

Inventory Management system using React TypeError: Cannot read property 'map' of undefined

import React from 'react';

function StockEventsTable(props){
    const {stockEvents} = props // same as const stockEvents = props.stockEvents
    return (
        <div className='StockEventTable'>
            {stockEvents.map(event => ( 
               <p>Qunatity: {event.qty}</p> 
            ))} 
        </div>
    )
  }

  export default StockEventsTable;

import React from 'react'; 
import './App.css'; )
import StockEventsTable from './components/StockEventsTable';

const fetchedProducts = [
  {id: 1, name: 'Super Maroo'} ]
  
const fetchedStockEvents = [
   {id: 1, type: 'add', qty: 100, product: fetchedProducts[0]}, 
   {id: 2, type: 'remove', qty: -20, product: fetchedProducts[0]},
   {id: 3, type: 'remove', qty: -10, product: fetchedProducts[0]}
 ]

function App() {
  return (
    <div className='App'>
      <h1>The StockApp </h1>
      <StockEventsTable 
        products={fetchedProducts} 
        stockevents={fetchedStockEvents} />

    </div>
  );
}

export default App;

Please help. The program doesn't render when I include the .map(). Before that, it works well. I am learning and following a tutorial for react, and everything looks like the sample code but I can't compile mine.

Upvotes: 0

Views: 183

Answers (3)

ashwin yadav
ashwin yadav

Reputation: 15

yeah, so you are messing around with wrong map syntax. This is a great link for in-built prototypes and function. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

It goes something like this:

 <div className='StockEventTable'>
        {stockEvents.map(event => **(** //this should be curly braces
           <p>Qunatity: {event.qty}</p> 
        **)**)} // and end with one here too

and this too, Change stockEvents to stockevents (all lowercase) I didn't made the changes, so you spot them and follow the course along and if you are new to JS, try freecodecamp.org 's JS and react, they are great learning spot. Have a good Day!

Upvotes: 0

Sarun UK
Sarun UK

Reputation: 6736

Change stockEvents to stockevents (all lowercase)

 const { stockevents } = props; 
  return (
    <div className="StockEventTable">
      {stockevents.map((event) => (
        <p>Qunatity: {event.qty}</p>
      ))}
    </div>
  );

working code - https://codesandbox.io/s/late-glitter-me3if?file=/src/App.js

Upvotes: 1

jcHernande2
jcHernande2

Reputation: 291

I think you should change stockEvents to stockevents (all lowercase), try change the code

Example:

function StockEventsTable(props){
    const {stockevents} = props // same as const stockEvents = props.stockEvents
    return (
        <div className='StockEventTable'>
            {stockevents&&stockevents.map(event => ( 
               <p>Qunatity: {event.qty}</p> 
            ))} 
        </div>
    )
  }

Upvotes: 0

Related Questions