CODEWITHSUNDEEP
javascriptreactjs
Drunken Janna
Drunken Janna

Reputation: 146

How to fix not working map method in javascript?

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.

Upvotes: 2

Views: 8110

Answers (6)

Drunken Janna
Drunken Janna

Reputation: 146

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) => {

Upvotes: 1

Sonth
Sonth

Reputation: 11

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>
        )
    }
}

Upvotes: 0

Auskennfuchs
Auskennfuchs

Reputation: 1737

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>
        )
    }

}

Upvotes: 1

mrJoe
mrJoe

Reputation: 500

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>
        )
    }

}

Upvotes: 0

Adolfo Onrubia
Adolfo Onrubia

Reputation: 1831

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>
        )
    }

}

Upvotes: 0

Dupocas
Dupocas

Reputation: 21317

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>
    )
}

Upvotes: 2

Related Questions