How to display title alone of this Languages object in react native?

Question

My goal is to display all the titles of these objects in react native.

{
    "Languages": [
        {
            "PKM": "Languages",
            "Title": "Tamil2",
        },
        {
            "PKM": "Languages",
            "Title": "தமிழ்",
        },
        {
            "PKM": "Languages",
            "Title": "English",
        }
    ],
    "status": "success",
    "message": "Retrieve Success!"
}

The expected result is to display the three titles alone from these objects. I've seen using the js parse method but it displays only the single title not not the three.

Answer 1

use map

const data = {
  Languages: [
    {
      PKM: 'Languages',
      Title: 'Tamil2',
    },
    {
      PKM: 'Languages',
      Title: 'தமிழ்',
    },
    {
      PKM: 'Languages',
      Title: 'English',
    },
  ],
  status: 'success',
  message: 'Retrieve Success!',
};

on render

{data.Languages.map((item) => (
  <Text>{item.Title}</Text>
))}

update code

import React, { useEffect, useState } from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import Constants from 'expo-constants';

const data = {
  Languages: [
    {
      PKM: 'Languages',
      Title: 'Tamil2',
    },
    {
      PKM: 'Languages',
      Title: 'தமிழ்',
    },
    {
      PKM: 'Languages',
      Title: 'English',
    },
  ],
  status: 'success',
  message: 'Retrieve Success!',
};

export default function App() {
  // const [data, setData] = useState([]);

  // useEffect(() => {
  //   fetch('https://dummyjson.com/products/1')
  //     .then((res) => res.json())
  //     .then((json) => {
  //       console.log(json);
  //       setData(json.Languages);
  //     });
  // });
  const renderItem = (item) => {
    return <Text>{item.item['Title']}</Text>;
  };
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>
        Change code in the editor and watch it change on your phone! Save to get
        a shareable url.
      </Text>
      <FlatList
        style={{ flex: 1 }}
        data={data['Languages']}
        renderItem={renderItem}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});