CODEWITHSUNDEEP
reactjsreact-native
BB5575
BB5575

Reputation: 9

Printing list of array objects isn't working react native

I have a list of array objects in a python api and I want to print them in a React native app as a list. But the array objects are printing as a paragraph.

python code

return {
        "data": {
            'best_food': ["IceCream", "Milk", "Chocolate", "Cookies", "Cake"]
            if pred_value == 1
            else ["Apple", "Banana", "Orange", "Pineapple", "Mango"]
            if pred_value == 2
            else ["Meat", "Fish", "Eggs"]
            if pred_value == 3
            else 'Something Went Wrong',
        }

React native fetch data with axios

const handleSubmit = (e) => {
    e.preventDefault();
    const params = {
      type,
      pref,
      age,
      time,
    };

    axios
      .post("http://0.0.0.0:8080/foodsuggest", params)
      .then((res) => {
        const data = res.data.data;
        const parameters = JSON.stringify(params);
        const msg = `${data.best_food}`;
        setMsg(msg);
      })
      .catch((error) => alert(`Error: ${error.message}`));
  };

Display details

<View style={styles.textContainer}>
    <Text style={styles.smallText2}>{msg}</Text>
</View>

I'm getting the output like this

IceCream,Milk,Chocolate,Cookies,Cake

But I want output as a list like below

Ice cream
Milk
Chocolate
Cookies
Cake

How can I change the code for print like this? Any help would be greatly appreciated.

Upvotes: 0

Views: 30

Answers (1)

Haneen
Haneen

Reputation: 1146

I think it's because you are rendering an array instead of a normal string.

You will need to map around the values in the array when returning the view and render each text node as you want.

<View>
      {msgs.map(msg => (
        <Text>{msg}</Text>
      ))}
</View>

Upvotes: 1

Related Questions