Component composition issue react - reactjs

Question

I'm trying to use composition component for making a menu in react native but I can't figure it why it doesn't work as expected.
I use [react native pop menu][1] to make the menu. Here what I'm trying to do :
Make a MenuContainer component with a children property
Make a MyMenuOptions component that will be nested inside the menu container as children.
import in my screen MyMenuOptions nested in MenuContainer
Issue: the menu container is working as expected but the MyMenuOptions is not showing on screen.
[1]: https://github.com/instea/react-native-popup-menu
MyMenuContainer component :
const MenuContainer = ({ nameMenu, children }) => {
const optionsStyles = {
optionsContainer: {
padding: 3,
width: 250,
},
};
return (
<Menu style={{ flexDirection: "row", marginRight: 10 }}>
<MenuTrigger
style={styles.triggerMenu}
text={nameMenu}
customStyles={{
TriggerTouchableComponent: TouchableWithoutFeedback,
}}
/>
<MenuOptions customStyles={optionsStyles}>{children}</MenuOptions>
</Menu>
);
};
MyMenuOptions Component :
import React from "react";
import { StyleSheet, Text } from "react-native";
import { MenuOption } from "react-native-popup-menu";
import MenuContainer from "./MenuContainer";
import { CheckBox } from "react-native-elements";
const MyMenuOptions = ({ textSubMenu, value, toggle }) => {
return (
<MenuContainer>
<MenuOption onSelect={toggle} style={styles.sousMenu}>
<CheckBox
center
title={textSubMenu}
checkedIcon="dot-circle-o"
uncheckedIcon="circle-o"
checked={value}
/>
</MenuOption>
</MenuContainer>
);
};
styles....
export default MyMenuOptions;
And in my final screen I import both component :
import MenuContainer from "../components/Menu/MenuContainer";
import MyMenuOptions from "../components/Menu/MenuCheck";
Some code ....
<View style={styles.menuOnglet}>
<MenuContainer nameMenu="Test menu">
<MyMenuOptions textSubMenu="My sub menu" value={true} />
</MenuContainer>
</View>
So as I said I can see the "Test menu" button show on my screen but i see nothing inside the menu when i click on it like there is no children.
Please, what am I missing here ?

Answer 1

why you surround MenuOption with MenuContainer in MyMenuOptions.js
const MyMenuOptions = ({ textSubMenu, value, toggle }) => {
return (
<MenuContainer> <!----------- you need to remove this -->
<MenuOption onSelect={toggle} style={styles.sousMenu}>
<CheckBox/>
</MenuOption>
</MenuContainer> <!---------- you need to remove this -->
);
};
you steps should be :
App.js file
it must be like this
import { MenuProvider } from 'react-native-popup-menu';
export const App = () => (
<MenuProvider>
<YourApp />
</MenuProvider>
);
MenuContainer.js file
const MenuContainer = ({ nameMenu, children }) => {
return (
<Menu >
<MenuTrigger/>
<MenuOptions>
{children}
</MenuOptions>
</Menu>
);
};
MyMenuOptions.js file
const MyMenuOptions = ({ textSubMenu, value, toggle }) => {
return (
<MenuOption onSelect={toggle} style={styles.sousMenu}>
.......
</MenuOption>
);
};