I am trying to reduce the length of the render()method to improve readability by calling class methods that contains isolated JSX elements.

The problem is that this technique won't work for more than one JSX element.

I embedded each element inside a <View> but it doesn't prevent this error

Invariant Violation : Text strings must be rendered within a <Text> ponent.

import React, { Component } from 'react';
import { Text, View,StyleSheet } from 'react-native';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    }})

export default class HelloWorldApp extends Component {
    header() {
        return  (
            <Text>header</Text>
        );

    }
    firstElement() {
        return (
                <Text>first element</Text>
        );

    }
    secondElement() {
        return (
            <Text>second element</Text>
        );

    }

    footer(){
        return (
            <Text>footer</Text>
        );
    }

    render() {

     let header  = this.header();
     let firstElement = this.firstElement();
     let secondElement= this.secondElement();
     let footer = this.footer();

        return (
            <View style={styles.container}>
                header,
                firstElement,
                secondElement,
                footer,
            </View>

        );

    }


}

I am aware that the syntax in render()is not correct, it is to show you what i want the code to look like.

I am trying to reduce the length of the render()method to improve readability by calling class methods that contains isolated JSX elements.

The problem is that this technique won't work for more than one JSX element.

I embedded each element inside a <View> but it doesn't prevent this error

Invariant Violation : Text strings must be rendered within a <Text> ponent.

import React, { Component } from 'react';
import { Text, View,StyleSheet } from 'react-native';

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center"
    }})

export default class HelloWorldApp extends Component {
    header() {
        return  (
            <Text>header</Text>
        );

    }
    firstElement() {
        return (
                <Text>first element</Text>
        );

    }
    secondElement() {
        return (
            <Text>second element</Text>
        );

    }

    footer(){
        return (
            <Text>footer</Text>
        );
    }

    render() {

     let header  = this.header();
     let firstElement = this.firstElement();
     let secondElement= this.secondElement();
     let footer = this.footer();

        return (
            <View style={styles.container}>
                header,
                firstElement,
                secondElement,
                footer,
            </View>

        );

    }


}

I am aware that the syntax in render()is not correct, it is to show you what i want the code to look like.

• javascript
• reactjs
• react-native
• coding-style

3 Answers 3

Your error states that: you're having string text outside of a <Text> ponent. In your code, your header texts and mas ( , ) are the problem. Here is how to fix it:

return (
    <View style={styles.container}>
        {header}
        {firstElement}
        {secondElement}
        {footer}
        // or you can directly use your functions
        /*
        {this.header()}
        {this.firstElement()}
        {this.secondElement()}
        {this.footer()}
        */
    </View>
);

P/s: In case you still don't understand why you got the error, you can try this:

return (
    <View style={styles.container}>
        <Text>
            header
            firstElement,
            secondElement,
            footer,
        </Text>
    </View>
);

The problem was in your return You forgot to wrap your functions in {braces}. See How to Call a Function inside a Render in React/Jsx for a better explanation.

Change it to:

    return (
      <View style={styles.container}>
        {header}
        {firstElement}
        {secondElement}
        {footer}
      </View>
    );

return (
    <View style={styles.container}>
         {header()}
         {firstElement()}
         {secondElement()}
         {footer()}
    </View>
);

but instead of doing that, you can just make their own ponents and import them.