Map() prop errors in react.js

[Kritik]

how to solve this ERROR
TypeError: _data_Carddata__WEBPACK_IMPORTED_MODULE_2___default.a.map is not a function

Card.js

import React from 'react';
const Card = (Props) => {
        
    return (
        <>
        <div className="card mb-3 card-m-w spacer">
        <div className="row g-0">
        <div className="col-md-4">
        <img className="card-img" src={Props.imgLink} alt="test" />
        </div>
        <div className="col-md-8">
        <div className="card-body">
        <h5 className="card-title">{Props.cardName}</h5>
        <p className="card-text">{Props.cardDec}</p>
        <p className="card-text"><small ><a className="text-muted" href={Props.targateLink}>{Props.targateMsg}</a></small></p>
        </div>
        </div>
        </div>
        </div>
        </>
    )
}

Portfolio.js

import React from 'react';
import Card from './Card';
import Carddata from '../data/Carddata';

const Portfolio = () => {
    Carddata.map(function(Props){
        return(<Card 
            cardName = {Props.cardName}
            cardDec = {Props.cardDec}
            imgLink = {Props.imgLink}
            targateMsg = {Props.targateMsg}
            targateLink = {Props.targateLink}
            />
            );
    });

};


export default Portfolio

Used items Bootstrap , react.js

[kevinSmith]

TypeError: _data_Carddata__WEBPACK_IMPORTED_MODULE_2___default.a.map is not a function

This is telling you that what you are trying to map does not have a function/method called map. Since all arrays have that, that means that Carddata is not an array.

My first instinct would have been to console.log out Cardata to see what it is.

I’m guessing that it’s undefined because you importing it as a default export:

import Carddata from '../data/Carddata';

from a file that doesn’t seem to have a default export. Actually it doesn’t have any exports. If you change the first line in Carddata.js to:

export default [

it may start working. Alternatively, you could add:

export default Carddata;

to the bottom of the file.

[Kritik]

Portfolio.js

import React from 'react';
import Card from './Card';
import Carddata from '../data/Carddata';

const Portfolio = () => {
    Carddata.map(function(Props){
        return(<Card 
            cardName = {Props.cardName}
            cardDec = {Props.cardDec}
            imgLink = {Props.imgLink}
            targateMsg = {Props.targateMsg}
            targateLink = {Props.targateLink}
            />
            );
    });

};


export default Portfolio

[kevinSmith]

It’s correct, Portfolio is not returning anything, or technically returning its default of undefined.

const Portfolio = () => {
    Carddata.map(function(Props){
    // ...

To return something, you could either use the implicit return of the arrow function and do:

const Portfolio = () =>
    Carddata.map(function(Props){
    // ...

or you could have it return:

const Portfolio = () => {
  return (
    Carddata.map(function(Props){
    // ...

But then you have another problem, you need to return a single JSX node. You can either wrap it all in a div or a fragment:

const Portfolio = () => {
  return (
    <div>
      Carddata.map(function(Props){
      // ...
    </div>
  )
}

or

const Portfolio = () => {
  return (
    <React.Fragment>
      Carddata.map(function(Props){
      // ...
    </React.Fragment>
  )
}

or possibly this, depending on what version of React you have:

const Portfolio = () => {
  return (
    <>
      Carddata.map(function(Props){
      // ...
    </>
  )
}

[Kritik]

Solved

THANKS

[kevinSmith]

Cool. In the case of the code right above, you don’t actually need the Fragment tags (<> and </>) if you just have one element in it (Card). If it’s just one you don’t need it. You were mapping before which would have given you multiple ones so they need to be wrapped in something.

Are you good now or is there more?

[Kritik]

one again thank you,
now I just have to align these cards side by side.