How to view a multiple components in a component

Question

How to view a multiple components in a sub component ?

More details : I have a page that includes 4 horizontal sliders .. so I made every slider as a separated component under this names (firstSlider.js, secondSlider.js....) and need to view all these sliders in a sub component called "explore.js" (It's an empty component file to just view this sliders) .. and rendering explore.js through the App.js

Any solution ?

import React, { Component } from 'react';
import FirstSlider from './firstSlider'
import SecondSlider from './secondSlider'
import ThirdSlider from './secondSlider'

export default function AppPortal(){
  return (
  <>      
  
    <FirstSlider />
    <SecondSlider />
    <ThirdSlider />

  </>
);
};

explore.js

import React from 'react';
import {  Text, SafeAreaView, ScrollView, Image, Item, View, TouchableOpacity } from 'react-native';
import styles from './../../styles/explore'



export default function ThirdSlider(){
  return (
    <SafeAreaView style={styles.container}>
     <ScrollView style={styles.scrollView} horizontal={true} >
       <Text style={styles.sldrTtlStl}>Most eaten</Text>
        ....Rest of the code
     </ScrollView>
    </SafeAreaView>
  );
}

thirdSlider.js and the rest sliders are the same

The result

they all on top of each other

just import all the sliders (firstSlider.js, secondSlider.js) and use them like this? — Tim Gerhard, Jun 22 '20 at 09:34
already did that but they improperly viewed .. Like they are on top of each other — Mustafa Fahmy, Jun 22 '20 at 09:38

Pedro Specter · Answer 1 · 2020-06-22T09:44:44.337

can you share some code?

logically if you want the four of them rendering at the same time you need to :

export function explorer() {
  return (
    <>
      <FirstSlider />
      <SecondSlider />
      <ThirdSlider />
      <FourthSlider />
    </>
  );
}

if you want just one of the sliders being enabled according to a certain prop, then you should:

function SwitchExplorer(x) {
  switch (x) {
    case 'firstSlider':
      return <FirstSlider />;
    case 'secondSlider':
      return <SecondSlider />;
    case 'thirdSlider':
      return <thirdSlider />;
    case 'fourthSlider':
      return <FourthSlider />;
    default:
      return null
  }
}

function explorer() {
  return (
    { SwitchExplorer(slider) }
  )
}

score 1 · Accepted Answer · answered Jun 22 '20 at 11:06

You have to implement like FlatList inside FlatList. You can prepare array as below

[{"id":1,"title":"Category 1","mealList":[]},
{"id":2,"title":"Category 1","mealList":[]},
{"id":3,"title":"Category 1","mealList":[]}]

AppPortal.js

export default function AppPortal() {
  function renderItem() {
    return (<View>
      {/** Category Name */}
      <Text>{item.title}</Text>
      {/** MealList */}
      <FlatList
        ...
        data={props.mealList} // List with subcategory item
        renderItem={/** Subcategory UI */}
        horizontal={true}

      />
    </View>)
  }
  /** Render Main List */
  return (<FlatList data={this.props.listData}
    ....
    data={props.listData} // Main list
    renderItem={renderItem}
  />);
};

How to view a multiple components in a component

2 Answers2