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 ponents like this: [li.../li, li.../li, li.../li], now it's just original array without any errors in console.

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 ponents like this: [li.../li, li.../li, li.../li], now it's just original array without any errors in console.

• javascript
• reactjs

Share Improve this question Follow edited Jul 23, 2019 at 20:15 Emile Bergeron 17.4k55 gold badges8585 silver badges131131 bronze badges asked Jul 23, 2019 at 20:11 Drunken JannaDrunken Janna 14611 silver badge1010 bronze badges 1

• 2 map returns a new array. You act like it is altering it – epascarello Commented Jul 23, 2019 at 20:13

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 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>
    )
}

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

}

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

Set result into a variable and then print it. It's a mon 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>
        )
    }

}

Map function performs putation 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 puted 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>
        )
    }

}

Any method can only return once and then won't be performed anymore. I would remend 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>
        )
    }
}