I am trying to pass props from my main screen to the child component but its not working. The featured row is not rendered. Featured row is working fine once I pass it some strings as props or a variable. But when I use the map function the props are not passed. Data is being read from sanity CMS and I am able to see the fetched data from console.log. I can print in console the complete object as well as some of its elements that I require to pass.

the issue is here I suppose.

{featuredCategories.map((category) => {
      <FeaturedRow
        key={category._id}
        title={category.name}
        description={category.description}
        id={category._id}
      />;

      console.log(category.name);
      console.log(category.description);
    })}

The complete code of Parent screen is as under

import {
  View,
  Text,
  SafeAreaView,
  Image,
  TextInput,
  ScrollView,
} from "react-native";
import { React, useEffect, useLayoutEffect, useState } from "react";
import { useNavigation } from "@react-navigation/native";
import {
  ChevronDownIcon,
  UserIcon,
  MagnifyingGlassIcon,
  AdjustmentsVerticalIcon,
} from "react-native-heroicons/outline";
import Categories from "../components/Categories";
import FeaturedRow from "../components/FeaturedRow";
import client from "../sanity";
const testTitle = "testing";

export default function HomeScreen() {
  const [featuredCategories, setFeaturedCategories] = useState([]);
  const navigation = useNavigation();
  {
    useEffect(() => {
      client
        .fetch(
          `*[_type == "featured"]{...,type[]->{
  ...,dishes[]->      
  },
}`
        )
        .then((data) => setFeaturedCategories(data))
        .catch(console.log("No data received"));
    }, []);

    console.log(featuredCategories);
  }
  useLayoutEffect(() => {
    navigation.setOptions({ headerShown: false });
  });
  return (
    <SafeAreaView className="bg-white pt-5">
      {/*header*/}
      <View className="flex-row pb-3 mx-3 space-x-2 px-4">
        <Image
          source={{ uri: "https://links.papareact.com/wru" }}
          className="h-7 w-7 bg-gray-300 p-4 rounded-full"
        />
        <View className="flex-1">
          <Text className="font-bold text-gray-400 text-xs ">Delieveroo</Text>
          <Text className="font-bold text-xl">
            Current Location
            <ChevronDownIcon size={20} color="#00CCBB" />
          </Text>
        </View>
        <UserIcon size={35} color="#00CCBB" />
      </View>
      {/*Search Bar*/}
      <View className="flex-row p-2 space-x-2 pb-2 mx-4 items-center">
        <View className="flex-row space-x-2 flex-1 bg-gray-200 p-3 ">
          <MagnifyingGlassIcon color="grey" size={20} />
          <TextInput
            placeholder="Resturants and Cousines"
            keyboardType="default"
          />
        </View>
        <View>
          <AdjustmentsVerticalIcon />
        </View>
      </View>

      <ScrollView className="bg-white flex-1">
        <Categories />
        {featuredCategories.map((category) => {
          <FeaturedRow
            key={category._id}
            title={category.name}
            description={category.description}
            id={category._id}
          />;

          console.log(category.name);
          console.log(category.description);
        })}
        <FeaturedRow title="1st Row" description="Best in Town Today" id="c1" />
        <FeaturedRow
          title="Tasty Discounts"
          description="Best on Budget"
          id="c2"
        />

        <FeaturedRow
          title="Offers Near You"
          description="Partners Discounts"
          id="c3"
        />
      </ScrollView>
    </SafeAreaView>
  );
}

Whereas the featuredRow code is here

import { View, Text, ScrollView } from "react-native";
import React from "react";
import { ArrowRightIcon } from "react-native-heroicons/outline";
import ResturantCard from "./ResturantCard";

export default function FeaturedRow({ props }) {
  //console.log(props);
  return (
    <View>
      <View className="flex-row mt-4 items-center justify-between px-4">
        <Text className="font-bold text-lg">{props.title}</Text>
        <ArrowRightIcon />
      </View>
      <Text className="text-xs px-4 text-gray-500">{props.description}</Text>
      <ScrollView
        horizontal
        contentContainerStyle={{
          paddingHorizontal: 15,
          paddingBottom: 15,
        }}
        className="pt-4 pb-2"
      >
        {/* Resturant Card*/}
        <ResturantCard
          id="d1"
          imgUrl="https://links.papareact.com/gn7"
          title="Ramzan Shinwari"
          genre="Dessi Food"
          address="123 Chaklala"
          description="The Best Food in the Town"
          lat="121343"
          long="453233"
          dishes={[]}
        />
        <ResturantCard
          id="d1"
          imgUrl="https://links.papareact.com/gn7"
          title="Ramzan Shinwari"
          genre="Dessi Food"
          address="123 Chaklala"
          description="The Best Food in the Town"
          lat="121343"
          long="453233"
          dishes={[]}
        />
        <ResturantCard
          id="d1"
          imgUrl="https://links.papareact.com/gn7"
          title="Ramzan Shinwari"
          genre="Dessi Food"
          address="123 Chaklala"
          description="The Best Food in the Town"
          lat="121343"
          long="453233"
          dishes={[]}
        />
      </ScrollView>
    </View>
  );
}

Output

Output Picture

CodePudding user response：

You need to return the component:

{featuredCategories.map((category) => {
  return (
   <FeaturedRow
     key={category._id}
     title={category.name}
     description={category.description}
     id={category._id}
   />
 );
})}