Custom function not rendering on React Native-CodePudding

I'm working on a react native project and I have an object in javascript containing a bunch of different categories, and items under that category. I also have a function (renderButtons()) that is supposed to render them, mapping the object so that each item is displayed as a button under its respective category. But, for some reason, this function just isn't displaying anything on the page.

When instead of using <Text> or <Button>, I use alert, then the function calls perfectly, and gets all the values that I want, but it just won't actually display itself on the page. Everything else on the page renders perfectly, so what is it that I'm doing wrong?

My .js code for the screen is below (some parts omitted for clarity):

import React, {useState, useEffect} from 'react';
import { View, Text, Button, Alert, Modal, Pressable } from 'react-native';
import { globalStyles } from './styles/global';

export default function IngredientScreen({ navigation }) {
    const [modalVisible, setModalVisible] = useState(false);
    var ingredientList = [
        {
            category: "Cooking & Baking Ingredients",
            items: ["Flour"]
        },
        {
            category: "Dips & Spreads",
            items: ["Cream Cheese"]
        },
        {
            category: "Fresh & Frozen Fruits",
            items: ["Passion Fruit", "Apples"]
        },
        {
            category: "Grains, Rice & Cereal",
            items: ["Millet"]
        },
    ];
    
    function renderButtons() {
        return ingredientList.map(buttonInfo => (
            <Text style={globalStyles.h2}>{buttonInfo.category}</Text>,
            buttonInfo.items.forEach(item => {
                <Button style={globalStyles.buttonOpen}>{item}</Button>
            })
        ));
    };


    return (
      <View style={globalStyles.container}>
        <Text style={globalStyles.h1}>Your Ingredients</Text>
        <View>
          {renderButtons()}
        </View>
      </View>
    );
  };

CodePudding user response：

The renderButtons function has some problems:

Button requires the prop title, instead of children. Check: https://reactnative.dev/docs/button
buttonInfo.items.forEach would never return a list a component, as forEach just iterates over the items but does not return anything, so you need to use the map function here, and also add a {} around the { buttonInfo.items.map(...) }
In this code below you are not returning anything, but even retuning, it would need a map, instead of forEach, as I said above.

     buttonInfo.items.forEach(item => {
        <Button style={globalStyles.buttonOpen}>{item}</Button>
     })

You can't return two components when it's not wrapped inside a View or a Fragment <></> Needs to add a fragment here:

       <>
            <component1 />
            <component2 />
       </>

Needs to remove this , after ,

This is an example of your code with the problems mentioned above solved (removed the styles for simplicity):

https://snack.expo.dev/@ronicesarrc/73868c

import React, {useState, useEffect} from 'react';
import { View, Text, Button, Alert, Modal, Pressable } from 'react-native';

export default function IngredientScreen({ navigation }) {
    const [modalVisible, setModalVisible] = useState(false);
    let ingredientList = [
        {
            category: "Cooking & Baking Ingredients",
            items: ["Flour"]
        },
        {
            category: "Dips & Spreads",
            items: ["Cream Cheese"]
        },
        {
            category: "Fresh & Frozen Fruits",
            items: ["Passion Fruit", "Apples"]
        },
        {
            category: "Grains, Rice & Cereal",
            items: ["Millet"]
        },
    ];
    
    function renderButtons() {
        return ingredientList.map(buttonInfo => (
          <>
            <Text >{buttonInfo.category}</Text>
            {buttonInfo.items.map(item => {
                return <Button title={item} />
            })}
          </>
        ));
    }


    return (
      <View>
        <Text >Your Ingredients</Text>
        <View>
          {renderButtons()}
        </View>
      </View>
    );
  };

CodePudding user response：

Please try below method :

{this.renderButtons()}

As to call a function, you have to add this. With function. Hope this works.

If it doesn't work please write comment's i will help to figure out this.