How to pass a map in react native

Question

I am building a chat and need to pass the data inside the key "buttons" as a Prop to a component. Can anyone clarify how should I do this? I don't know what is the exact PropType to use in this case. This is the json of the response from where I wanto to get the data:

{
"answer": {
    "key": "1605009993OpdNRfNx",
    "name": "Text message example",
    "modules": [null, {
        "position": 1,
        "text": "Text message description",
        "textHTML": "Text message description",
        "type": "text",
        "buttons": {
            "1605010005zDRgizhW": {
                "key": "1605010005zDRgizhW",
                "payload": "1605009983S6UBYapR",
                "position": 1,
                "text": "button 1"
            },
            "16050100433baadqRu": {
                "key": "16050100433baadqRu",
                "payload": "1605010037bRkMrp9V",
                "position": 2,
                "text": "button 2"
            }
        }
    }]
}

}

Thanks in advance

Answer 1

Parse the json, then pull out the object named "buttons". After that, pass the buttons object to the child component.

Here is an example:

App.js

import React from 'react';
import {View} from "react-native";
import TestComponent from "./TestComponent";

const jsonData = "{\n" +
    "\"answer\": {\n" +
    "    \"key\": \"1605009993OpdNRfNx\",\n" +
    "    \"name\": \"Text message example\",\n" +
    "    \"modules\": [null, {\n" +
    "        \"position\": 1,\n" +
    "        \"text\": \"Text message description\",\n" +
    "        \"textHTML\": \"Text message description\",\n" +
    "        \"type\": \"text\",\n" +
    "        \"buttons\": {\n" +
    "            \"1605010005zDRgizhW\": {\n" +
    "                \"key\": \"1605010005zDRgizhW\",\n" +
    "                \"payload\": \"1605009983S6UBYapR\",\n" +
    "                \"position\": 1,\n" +
    "                \"text\": \"button 1\"\n" +
    "            },\n" +
    "            \"16050100433baadqRu\": {\n" +
    "                \"key\": \"16050100433baadqRu\",\n" +
    "                \"payload\": \"1605010037bRkMrp9V\",\n" +
    "                \"position\": 2,\n" +
    "                \"text\": \"button 2\"\n" +
    "            }\n" +
    "        }\n" +
    "    }]\n" +
    "}\n" +
    "}"

export default function App() {

    const data = JSON.parse(jsonData);
    const buttons = data.answer.modules[1].buttons;


    return (
        <View style={{flex: 1, justifyContent: "center", alignItems: "center"}}>
            <TestComponent buttons={buttons} />
        </View>
    );
}

TestComponent.js

import React from "react";
import {View, StyleSheet, Button} from "react-native";

const TestComponent = props => {

    const { buttons } = props;

    const onPressHandler = () => {
        console.log(buttons);
    }

    return (
        <View>
            <Button title={"Press Me."} onPress={onPressHandler} />
        </View>
    );
};

export default TestComponent;