CODEWITHSUNDEEP
reactjsreact-native
yoann84
yoann84

Reputation: 810

Component composition issue react

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 :

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 ?

Upvotes: 0

Views: 93

Answers (1)

Ahmed Gaber
Ahmed Gaber

Reputation: 3966

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>
  );
};

Upvotes: 1

Related Questions