Problems with understanding of array.map() scope in React

Question

I have done an array.map() that loop through json file (goods.json). Then I want to make some manipulations with it (want to delete item from this array in removeCard(obj) method for example). Render is ok but the problem is that I don't understand why I can't see shoppingCardsJSX array in removeCard(obj) method, always get underfined. I have read answers in How to delete a ToDo Item onClick in React? and Remove item from array in React but unfortunately I didn't understand how it works. Can you please help me find out what I'm doing wrong ? Hope this part of code can illustrate my problem,

import { sample } from 'rxjs/internal/operators';
import React from 'react';
import ShoppingCard from './ShoppingCard';
import goods from './goods.json';

export default class ShoppingCards extends React.Component {
    constructor (props){
        super(props);
    }
    removeCard(obj){
        console.log("fireeeee");
        console.log(obj);
        console.log(this.shoppingCardsJSX);
    }
    render() {
        console.log("render");
        let shoppingCardsJSX = goods.map((good) => {
            return (
                <ShoppingCard
                    key = {good.id }
                    goodId = {good.id}
                    src = {good.src}
                    price = {good.price}
                    onRemoveCard={this.removeCard}
                />
            );
        });
        console.log(shoppingCardsJSX);
        return shoppingCardsJSX;
    }
}

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

Are you sure goods contains anything? Can you console.log it to be sure? — Magnum
– Magnum, Commented Oct 10, 2018 at 22:45

Asleepace · Accepted Answer · 2018-10-10 22:54:00Z

1

It looks like you never set this.shoppingCardsJSX and also you also should use this.removeCard.bind(this) instead of this.removeCard as a prop, because then it can reference this when it is called.

import { sample } from 'rxjs/internal/operators';
import React from 'react';
import ShoppingCard from './ShoppingCard';
import goods from './goods.json';

export default class ShoppingCards extends React.Component {
    constructor (props){
        super(props);
    }
    removeCard(obj){
        console.log("fireeeee");
        console.log(obj);
        console.log(this.shoppingCardsJSX);
    }
    render() {
        console.log("render");
        this.shoppingCardsJSX = goods.map((good) => {
            return (
                <ShoppingCard
                    key = {good.id }
                    goodId = {good.id}
                    src = {good.src}
                    price = {good.price}
                    onRemoveCard={this.removeCard.bind(this)}
                />
            );
        });
        console.log(this.shoppingCardsJSX);
        return this.shoppingCardsJSX;
    }
}

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

edited Oct 10, 2018 at 22:54

answered Oct 10, 2018 at 22:48

Asleepace

3,7452 gold badges27 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Asleepace Over a year ago

@prostyash awesome glad to help!

Ariel Salem · Accepted Answer · 2018-10-10 22:51:49Z

It looks like running the code snippet is returning an error because you're never actually setting shoppingCardsJSX to the component. Your console.log(this.shoppingCardsJSX); statement is causing it to error out

You can always try wrapping it in a div:

import { sample } from 'rxjs/internal/operators';
import React from 'react';
import ShoppingCard from './ShoppingCard';
import goods from './goods.json';

export default class ShoppingCards extends React.Component {
    constructor (props){
        super(props);
    }
    removeCard(obj){
        console.log("fireeeee");
        console.log(obj);
    }
    render() {
        return (
           <div>
             {
              goods && goods.map((good) => {
                return (
                  <ShoppingCard
                    key = {good.id }
                    goodId = {good.id}
                    src = {good.src}
                    price = {good.price}
                    onRemoveCard={this.removeCard}
                  />
                );
              });
            }
        </div>
      )
    }
}

Joseph Akayesi · Accepted Answer · 2018-10-10 22:55:36Z

0

You should use an arrow function to bind the this keyword to removeCard function like this

removeCard = (obj) => {
        console.log("fireeeee");
        console.log(obj);
        console.log(this.shoppingCardsJSX);
    }

The other way is to do this

<ShoppingCard
    key = {good.id }
    goodId = {good.id}
    src = {good.src}
    price = {good.price}
    onRemoveCard={this.removeCard.bind(this}
/>

However don't mix the two.

answered Oct 10, 2018 at 22:55

Joseph Akayesi

4711 gold badge11 silver badges32 bronze badges

Comments

Muhazzib UD-din Farooqui · Accepted Answer · 2018-10-11 09:12:32Z

0

Use Arrow function as they are binded by default. you dont need to bind these arrow functions.

 removeCard=(obj)=>{
        console.log("fireeeee");
        console.log(obj);
        console.log(this.shoppingCardsJSX);
    }

answered Oct 11, 2018 at 9:12

Muhazzib UD-din Farooqui

1099 bronze badges

Collectives™ on Stack Overflow

Problems with understanding of array.map() scope in React

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related