5

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

2 Answers 2

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

} });

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

2 Comments

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

6 Comments

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 -)
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?
@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.
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
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.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.