How to fix not working map method in javascript?

Question

I don't know why, but array method called name is not working for me. I used map method before, always worked properly...

I was searching for something on internet, tried to add keys or change the value from jsx to just normal text, nothing worked, I added some console.log in callback function, it worked, it looks like the return statement is not working

import React from 'react';
import AddBar from '../AddBar/AddBar'

const thingsToBuy = ["sandwich", "mango", "banana", "watermelon"];

class List extends React.Component {

    render() {
        thingsToBuy.map((thing, i) => {
            console.log(thingsToBuy);
            return <li key={i}>{thing}</li>
        })

        return (
            <div>
                <ol>
                    {thingsToBuy}
                </ol>
                <AddBar />
            </div>
        )
    }

}

The output should be an array of React components like this: [li.../li, li.../li, li.../li], now it's just original array without any errors in console.

map returns a new array. You act like it is altering it

epascarello
– epascarello

2019-07-23 20:13:16 +00:00
Commented Jul 23, 2019 at 20:13 — epascarello
– epascarello, Commented Jul 23, 2019 at 20:13

Dupocas · Accepted Answer · 2019-07-23 20:13:45Z

2

You need to store the mapping result in a const:

render() {
    const jsx = thingsToBuy.map((thing, i) => {
        console.log(thingsToBuy);
        return <li key={i}>{thing}</li>
    })

    return (
        <div>
            <ol>
                {jsx}
            </ol>
            <AddBar />
        </div>
    )
}

Or implicitly return:

render() {


    return (
        <div>
            <ol>
                {thingsToBuy.map((thing, i) => {
                    console.log(thingsToBuy);
                    return <li key={i}>{thing}</li>
                 })}
            </ol>
            <AddBar />
        </div>
    )
}

answered Jul 23, 2019 at 20:13

Dupocas

21.5k7 gold badges44 silver badges59 bronze badges

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

Comments

Auskennfuchs · Accepted Answer · 2019-07-23 20:15:30Z

You can either define a variable or put your map into the returned JSX. Right now the map result just get lost because it's not assigned to anything.

    render() {

        return (
            <div>
                <ol>
                   {thingsToBuy.map((thing, i) => (<li key={i}>{thing}</li>))}
                </ol>
                <AddBar />
            </div>
        )
    }

or

    render() {
        const listThings = thingsToBuy.map((thing, i) => {
            console.log(thingsToBuy);
            return <li key={i}>{thing}</li>
        })

        return (
            <div>
                <ol>
                    {listThings}
                </ol>
                <AddBar />
            </div>
        )
    }

}

Drunken Janna · Accepted Answer · 2019-07-23 20:22:16Z

1

Thanks for help, I forgot that map method is returning a new array, not editing old.

thingsToBuy.map((thing, i) => {

should be changed to:

thingsToBuy = thingsToBuy.map((thing, i) => {

answered Jul 23, 2019 at 20:22

Drunken Janna

1461 silver badge10 bronze badges

Comments

Adolfo Onrubia · Accepted Answer · 2019-07-23 20:14:36Z

Set result into a variable and then print it. It's a common mistake.

import React from 'react';
import AddBar from '../AddBar/AddBar'

const thingsToBuy = ["sandwich", "mango", "banana", "watermelon"];

class List extends React.Component {

    render() {
        const list = thingsToBuy.map((thing, i) => {
            console.log(thingsToBuy);
            return <li key={i}>{thing}</li>
        })

        return (
            <div>
                <ol>
                    {list}
                </ol>
                <AddBar />
            </div>
        )
    }

}

or just do it into the JSX

...

class List extends React.Component {

    render() {    
        return (
            <div>
                <ol>
                    {thingsToBuy.map((thing, i) =>
                      <li key={i}>{thing}</li>
                    )}
                </ol>
                <AddBar />
            </div>
        )
    }

}

mrJoe · Accepted Answer · 2019-07-23 20:14:59Z

Map function performs computation on each element in given array applying provided function to it and returns new array with modified elements. It doesn't change original array on which mapping was called. You didn't assign returned array to a variable so all data computed inside map() was lost. The solution is to hold results in a variable and return this variable in jsx.

import React from 'react';
import AddBar from '../AddBar/AddBar'

const thingsToBuy = ["sandwich", "mango", "banana", "watermelon"];

class List extends React.Component {

    render() {
        let elements = thingsToBuy.map((thing, i) => {
            console.log(thingsToBuy);
            return <li key={i}>{thing}</li>
        })

        return (
            <div>
                <ol>
                    {elements}
                </ol>
                <AddBar />
            </div>
        )
    }

}

Sonth · Accepted Answer · 2019-07-23 20:17:55Z

0

Any method can only return once and then won't be performed anymore. I would recommend doing it this way:

import React from 'react';
import AddBar from '../AddBar/AddBar'

const thingsToBuy = ["sandwich", "mango", "banana", "watermelon"];

class List extends React.Component {

    render() {
        return (
            <div>
                <ol>
                  {
                    thingsToBuy.map((thing, i) => {
                      <li key={i}>{thing}</li>
                    })
                  }
                </ol>
                <AddBar />
            </div>
        )
    }
}

answered Jul 23, 2019 at 20:17

Sonth

113 bronze badges

Collectives™ on Stack Overflow

How to fix not working map method in javascript?

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related