Question 73088 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Property map does not exist when trying to iterate over props data – Reactjs

I am trying to iterate over a JSON data set which i am sending as a prop. I tried printing the props and i see that the data is there. However i cannot seem to use .map as it states that it is not a property of the prop data.

Parent Component:

function HomePage() {

return (
   <React.StrictMode>
     <VolvoCarsProducstListPage cd={cars} />
   </React.StrictMode>
 );
}

export default HomePage;

Child component:

import React, { useState } from 'react';

export interface CarDataProps {
cars: Car[];
};

export interface Car {
 id: string,
 modelName: string,
 bodyType: string,
 modelType: string,
 imageUrl: string
}

export const VolvoCarsProducstListPage = (props: CarDataProps) => {

    const carsJSONData = props;
    carsJSONData.map()
    console.log(carsJSONData);

return (
    <div className="volvo-product-list-page">
    </div>

);

};

Tags:

2

Answers


  1. 0

    It looks like you’re trying to call .map on an object containing cars, not the array with cars. if you change these two lines it should work

        const carsJSONData = props;
    carsJSONData.map()

    to

        const carsJSONData = props.cars;
    carsJSONData.map(x => x)
    Login or Signup to reply.
  2. 0

    Property map does not exist because carsJSONData is not an array it’s the props the component recieves and this latter is of type CarDataProps which is an object that contains an array so you cannot map through it.
    however you can map through carsJSONData.cars or simply make carsJSONData = props.cars instead, if you want carsJSONData to be the property cars of the received props which is an array and pass props to the component this way :

    <VolvoCarsProducstListPage cars={cars} />

    to avoid any conflict

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search