Map function in class component react native

Question

I am new to React and I'm trying to iterate through a json file, want to render the objects by using the map function. However it doesn't display the objects. Can someone please tell me want I am doing wrong? Thanks in advance.

Here is my code:

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import stations from './test.json';



export default class Playlist extends Component {
    constructor(props) {
        super(props);
        this.state = {
            allStations: [stations],

        };

    }



    render() {
        return (

            <View>
                {this.state.allStations.map((item, index) => (
                    (
                        <View>
                            <Text>{item.firstName}</Text>
                        </View>
                    )
                ))}

            </View>




        )
    }
}

This is my json file:

[{
    "firstName": "Joe",
    "lastName": "Jackson",
    "gender": "male",
    "age": 28

   
 },
 {
    "firstName": "Brad",
    "lastName": "Brown",
    "gender": "male",
    "age": 45
   
   
 }
]

Answer 1

I am new to React and I'm trying to iterate through a json file, want to render the objects by using the map function. However it doesn't display the objects. Can someone please tell me want I am doing wrong? Thanks in advance.

Here is my code:

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import stations from './test.json';



export default class Playlist extends Component {
    constructor(props) {
        super(props);
        this.state = {
            allStations: [stations],

        };

    }



    render() {
        return (

            <View>
                {this.state.allStations.map((item, index) => (
                    (
                        <View>
                            <Text>{item.firstName}</Text>
                        </View>
                    )
                ))}

            </View>




        )
    }
}

This is my json file:

[{
    "firstName": "Joe",
    "lastName": "Jackson",
    "gender": "male",
    "age": 28

   
 },
 {
    "firstName": "Brad",
    "lastName": "Brown",
    "gender": "male",
    "age": 45
   
   
 }
]

Answer 2

Add your "test.json" file inside an assets folder and assign it to an index.js file, so when you have more files you can add them under assets and export them from a single location

Have a look into this code, Thankyou

For more information on how to use the map() function https://www.pluralsight.com/guides/how-to-use-the-map()-function-to-export-javascript-in-react