I'm parsing a JSON file that contains data on a restaurant including a few menu items. The issue I am having is that I am attempting to display all nested data entries (fooditems) in a Flatview but all that is being shown are 2 entries. The last fooditem entry in the first restaurant record, and the last fooditem entry in the second restaurant record.

JSON Snippet;

[
    {
    "id": 1,
    "title": "The Lock Inn (££)",
    "style": "Pub - Seafood - Vegan Options",    
    "information": "A small and cosy pub, with original features, and a roaring log-fire. Their Fish ‘n’ chips are a local favorite, as is the ‘Cullen Skink’, a smoked-haddock soup.",
    "image": "../assets/Images/Info-Welcome.png",
    "rating": "4",
    "menu": {
        "fooditem": {
            "name": "Local Butchers Haggis",
            "image" : "../assets/Images/Info-Welcome.png",
            "description" : "With a Rob Roy Whisky & Mustard Sauce",
            "price": "7.25"
            },
        "fooditem": {
            "name": "Highland Oak Smoked Salmon",
            "image" : "../assets/Images/Info-Welcome.png",
            "description" : "Finest Scottish Salmon",
            "price": "7.25"
            },

        "fooditem": {
            "name": "Fresh Homemade Soup of the Moment",
            "image" : "../assets/Images/Info-Welcome.png",
            "description" : "Garnished with Roasted Peppers",    
            "price": "7.25"
            },
               }
      },

{
    "id": 2,
    "title": "Other Pub (£)",
    "style": "Pub - Seafood - Vegan Options",    
    "information": "A small and cosy pub, with original features, and a roaring log-fire. Their Fish ‘n’ chips are a local favorite, as is the ‘Cullen Skink’, a smoked-haddock soup.",
    "image": "../assets/Images/Info-Welcome.png",
    "rating": "5",
    "menu": {
        "fooditem": {
            "name": "Fresh Buckie Haddock",
            "image" : "../assets/Images/Info-Welcome.png",
            "description" : "Deep Fried",
            "price": "7.25"
            },
        "fooditem": {
            "name": "Home-Made Steak Pie",
            "image" : "../assets/Images/Info-Welcome.png",
            "description" : "It's 95% meat",
            "price": "7.25"
            },
        "fooditem": {
            "name": "Houmous",
            "image" : "../assets/Images/Info-Welcome.png",
            "description" : "Smooth and Rich",            
            "price": "7.25"
            },
                 }
        },
]

And my JSX

    constructor() {
        super();
        this.state = {
            data: [],
            show: true,
        };
    }

    componentDidMount() {
        this.setState({ data : this.infoFile })
    }

    renderRow = ({ item }) => {

        return (
            <Block>
                <Text h4>{item.menu.fooditem.name}</Text>
                <Text captionMedium style={{ marginTop: 5 }}>{item.menu.fooditem.description}</Text>
                <Text navTitle>{item.menu.fooditem.price}</Text>
            </Block>
        )
    }

    render() {

        return (

            <Block style={styles.container}>
                <Text h3>Some of our favorites!</Text>
                    <Block>
                        <FlatList
                            style={{ marginHorizontal: 10, marginTop: 20 }}
                            data={infoFile}
                            renderItem={this.renderRow}
                            keyExtractor={(item, index) => item.id}
                        />
                    </Block>
            </Block>

        );
    }
}

So for reference, what is being down is "Fresh Homemade Soup of the Moment" and "Houmous". I want to show all fooditems from the FIRST restaurant. I don't want to display any data from the second restaurant.

Any help would be greatly appreciated!