Elements form array.map don't render

Question

I am trying to render elements from my state (array) but they don't want render on the screen. If I perform console.log(b.name) it logs my names in console.

renderAllElements() {
    this.state.myData.map(b => {
        return(
            <div>
                <h4>{b.name}</h4>
            </div>
        )
    })
}

render() {
    return (
        <div>
            {this.renderAllElements()}
        </div>
    )
}

What is in this.state.myData?

Nope
– Nope

2017-12-06 10:05:11 +00:00
Commented Dec 6, 2017 at 10:05 — Nope
– Nope, Commented Dec 6, 2017 at 10:05
return the map.

Chris
– Chris

2017-12-06 10:05:14 +00:00
Commented Dec 6, 2017 at 10:05 — Chris
– Chris, Commented Dec 6, 2017 at 10:05

Fawaz · Accepted Answer · 2017-12-06 10:05:45Z

4

You need to return back your map :

renderAllElements() {
  return this.state.myData.map(b => {
      return(
        <div>
            <h4>{b.name}</h4>
        </div>
     )
  })
}

answered Dec 6, 2017 at 10:05

Fawaz

3,5603 gold badges20 silver badges23 bronze badges

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

2 Comments

Mac Over a year ago

Oh yes! I'm so distracted :D

Fawaz Over a year ago

@Mac Guess these mistakes are common with all devs :D

Chris · Accepted Answer · 2017-12-06 10:07:44Z

2

You are correctly invoking your renderAllElements() function in your render method. You also seem to correctly map through your array variable, but the function doesn't return anything back to render once finished mapping.

Simply add a return for your map function and it should work:

renderAllElements() {
  return this.state.myData.map(b => {
      return(
        <div>
            <h4>{b.name}</h4>
        </div>
     )
  })
}

One-liner alternative:

renderAllElements() {
  return this.state.myData.map(b => <div><h4>{b.name}</h4></div>);
}

answered Dec 6, 2017 at 10:07

Chris

59.7k20 gold badges121 silver badges144 bronze badges

Comments

Rhymmor · Accepted Answer · 2017-12-06 10:14:10Z

1

Since you already use array functions you can alternatively rewrite it without curly braces:

renderAllElements = () => (
    this.state.myData.map(b => (
        <div>
            <h4>{b.name}</h4>
        </div>
    ));
)

So you don't need to remember about return statement :)

answered Dec 6, 2017 at 10:14

Rhymmor

415 bronze badges

Collectives™ on Stack Overflow

Elements form array.map don't render

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related