Can't get .map() working in React Native render()

Question

How can I get this to work, {showExamples} isn't showing any output. The full source code is here: https://rnplay.org/apps/t2E4Ig

var MyApp = React.createClass({
  render() {
    var showExamples = examples.map(function(value){
                return (
            <View>
                {value.render}
            </View>
          );
            });

    return (
        <View>

        <Image
          source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
          style={styles.base}
        />

        {showExamples}

        </View>
    );
  }
});

m4l3 · Accepted Answer · 2015-11-04 12:31:34Z

4

you can try this.

var MyApp = React.createClass({
  render() {

   return (
    <View>

      <Image
        source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
      style={styles.base}
      />

     {
       examples.map(function(value, i){
            return (
              <View key={i}>
                {value.render}
             </View>
           );
        })
     }

    </View>
);

} });

answered Nov 4, 2015 at 12:31

m4l3

1061 bronze badge

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

2 Comments

Sanna Keller-Heikkila Over a year ago

Please give more detail as to what the OP did wrong and how your code corrects it. Posting code-only answers in SO is frowned upon, as it does not help others as much as it would if there is an explanation of the answer.

Giant Elk Over a year ago

I don't have key but can't see any errors in www.rnplay.org, once I start using xCode will know for sure. The actual fix is calling the function value.render() as opposed to a reference to the function.

jevakallio · Accepted Answer · 2015-11-04 09:38:36Z

3

The render property on each of the example items is a function, so you need to invoke it with {value.render()}, instead of trying to "render a function: with {value.render}.

answered Nov 4, 2015 at 9:38

jevakallio

36k4 gold badges109 silver badges114 bronze badges

6 Comments

Giant Elk Over a year ago

I keep making this mistake, as soon as I went to sleep I realized I needed the (). It was horrible though to not get any errror, or visual that I was don't something wrong. I guess I should start using a debugger, however I was in www.rnplay.org -)

Giant Elk Over a year ago

Side note, I would of thought just value.render should display the contents of the function i.e. the source code. As it does in the browser console. Type foo = function() {return "fooy fun";} into a JS REPL, then foo and you see source code. My React Native app should of showed source no?

jevakallio Over a year ago

@GiantElk I'm not sure how that is expected to behave, but in either case, you cannot render text directly into View, but you must wrap it in a Text element.

Giant Elk Over a year ago

You are correct. I should of put more code up, {value.render()} is a function that returns a valid React Native component. Check it out here: rnplay.org/apps/t2E4Ig

jevakallio Over a year ago

Actually, I meant that if you expected to see the stringified source code of the value.render function, you would have needed to have wrapped it with a Text element. And that is assuming that React Native automatically calls toString on objects given to Text, which I don't know if it does.

|

Collectives™ on Stack Overflow

Can't get .map() working in React Native render()

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related