CODEWITHSUNDEEP
reactjsreact-propsarray.prototype.map
Nhat
Nhat

Reputation: 409

props.data.map does not work in my component

I am learning react and I am also new to JS, can someone please tell me why does the .map function in one component work, but doesn't work in another component?

Map works well in this component

import React from 'react';
import Card from './card';
import '../memoryGameStyle/cardList.css';

const CardList =(props)=>{
    const card=props.cards.map((c,i)=>(
        <Card
            key={i}
            card={c}
            cards={props}
        />
    ))
    return(
        <div className='card-list'>
            {card}
        </div>
    )
}

export default CardList;

but it does not work in this component

import React from 'react';
import '../memoryGameStyle/card.css';

class Card extends React.Component{
    constructor(props){
        super(props);
        const {hidden,show,id,r,g,b}=this.props.card
        this.state={...}
        const style='';
    }

    componentWillReceiveProps(){...}

    onClick=()=>{
        const {id}=this.props.card
        this.setState({hidden:false})
        this.setState({show:true})
        const cards=this.props.cards.map((card,i)=>{
            console.log(card)
        })
    }
render(){...}

I have this error every time

enter image description here

Upvotes: 0

Views: 1151

Answers (1)

Suhas V
Suhas V

Reputation: 164

You are sending incorrect data to the Card component.

Change

<Card
  key={i}
  card={c}
  cards={props}
/>

to

<Card
  key={i}
  card={c}
  cards={props.cards}
/>

Hope, you figured out the mistake.

Upvotes: 1

Related Questions