Array of text from a JSON object inserted into <Text> elements via forEach/map not rendering in React Native

Question

I'm making a Choose Your Own Adventure style game in React Native to learn how everything works. I figured it makes sense to keep the story in a separate JSON file and render it on one screen that updates depending on what arc the user is in.

Problem: when I write a forEach or map or other function to go through the array of paragraphs, the part of the screen it's supposed to be on is blank. Text from other parts of the return area displays fine, but what is supposed to be displayed from the forEach does not. Here's my code:

const StoryDisplayScreen = props => {
    const theStory = require('../data/TestStory.json')
    const theArc = 'intro'
    const storyText = () => {
        theStory[theArc].story.forEach((paragraph, i) => {
            <Text style={styles.body}>{paragraph}</Text>
        })
    }

    return (
        <View style={styles.screen}>
            <ScrollView>
                <View>
                    {storyText()}
                </View>
                <View style={styles.promptNextArcArea}>
                    <TouchableOpacity style={styles.promptNextArc}>
                        <Text style={styles.promptNextArcText}>What do you do?</Text>
                    </TouchableOpacity>
                </View>
            </ScrollView>
        </View>
    )
}

In case you're wondering the structure of the JSON file and its contents, I'm using this one to test with: https://github.com/gophercises/cyoa/blob/master/gopher.json

I've tried using map instead, tried putting things in Views, tried putting the forEach/map functions directly into the return section of the code, tried console.log-ing to confirm that my functions are working properly (which they appear to be), and... yeah, I'm at a loss.

Any suggestions?

hi, interesting, perhaps React DevTools might show the issue? — IronMan
– IronMan, Commented Mar 7, 2021 at 2:56
Try return - <ScrollView> <View> theStory[theArc].story.forEach((paragraph, i) => { return <Text style={styles.body}>{paragraph}</Text> }) </View> — Ajit Kumar
– Ajit Kumar, Commented Mar 7, 2021 at 2:58

Ketan Ramteke · Accepted Answer · 2021-03-07 03:15:26Z

1

Consider using map instead of forEach.

Full Working Example: Expo Snack

import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import Constants from 'expo-constants';

import { Card } from 'react-native-paper';

const StoryDisplayScreen = (props) => {
  const theStory = require('./data/TestStory.json');
  const theArc = 'intro';

  const storyText = () => {
    return theStory[theArc].story.map((paragraph, i) => (
      <Card style={{margin: 5, padding:5}}>
        <Text style={styles.body}>{paragraph}</Text>
      </Card>
    ));
  };

  return (
    <View style={styles.screen}>
      <ScrollView>
        <View>{storyText()}</View>
        <View style={styles.promptNextArcArea}>
          <TouchableOpacity style={styles.promptNextArc}>
            <Text style={styles.promptNextArcText}>What do you do?</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </View>
  );
};

export default StoryDisplayScreen;
const styles = StyleSheet.create({
  screen: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

edited Mar 7, 2021 at 3:15

answered Mar 7, 2021 at 3:09

Ketan Ramteke

10.7k2 gold badges28 silver badges46 bronze badges

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

2 Comments

pseudosecret Over a year ago

This does work. I noticed that there are parentheses used for the arrow function instead of curly braces. When I tried it with curly braces, I ran into my error of nothing displaying, but when I use parentheses to enclose the arrow function it works fine. Could you help me understand why please?

Ketan Ramteke Over a year ago

We need to use return statement when using curly brackets, in case of parentheses we don't need it.

Lenoarod · Accepted Answer · 2021-03-07 03:15:05Z

firstly, if you want your sort is a function, it must return something, just like the render method

const sort = () => {
   return (<View></View>)

}

you also can make the sort is a view, use it as a variable. like that, both they are can works.

const sort = (<View></View>)

but the sort must have something return. your way use for each and map dont return any. there are two ways can do that.

const storyText = () => {
        //,first way,define a array, push it in the array
        let  storyViews= []
        theStory[theArc].story.forEach((paragraph, i) => {
            sortyviews.push(<Text style={styles.body}>{paragraph}</Text>)
        })
        return soortView;
    }

the second way is to return directly a array

const storyText = () => {
        //,first way,define a array, push it in the array
        let  storyViews= []
        storyViews = theStory[theArc].story.map((paragraph, i) => {
            return (<Text style={styles.body}>{paragraph}</Text>)
        })
        return soortView;
        
    }

for more about the array operate to see the doc

Collectives™ on Stack Overflow

Array of text from a JSON object inserted into <Text> elements via forEach/map not rendering in React Native

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related