Web Analytics Made Easy -
StatCounter Extracting data and using it to populate a Menu - CodingForum

Announcement

Collapse
No announcement yet.

Extracting data and using it to populate a Menu

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Extracting data and using it to populate a Menu

    Hi, My aim is to be able to extract data from a MySQL database and put that data in to a Menu. I believe the way to go is get the data in to an array first then create the Menu. Is that correct?
    So I am using React Native popup menu package which looks fine. You can see the code for that below.


    Code:
    <MenuProviderstyle={{ flexDirection:"column", padding:30 }}>
    <MenuonSelect={value=>alert(`You Clicked : ${value}`)}>
    <MenuTrigger>
    <Textstyle={styles.headerText}>DropDown Menu</Text>
    
    </MenuTrigger>
    <MenuOptions>
    {
    this.state.plates.forEach((test) => {
    <MenuOptionvalue={test}>
    <Textstyle={styles.menuContent}>{test}</Text>
    </MenuOption>
    })
    }
    <MenuOptionvalue={"test"}>
    
    <Textstyle={styles.menuContent}>test</Text>
    </MenuOption>
    </MenuOptions>
    The problem is when I try to get it to automatically update the menu with this code
    Code:
    {
    this.state.plates.forEach((test) => {
    <MenuOption value={`${test}`}>
    <Text style={styles.menuContent}>{test}</Text>
    </MenuOption> })
    }
    I also add this

    Code:
    constructor(props) {
    super(props);
    this.state = {
    plates: ['hi', 'not',]
    
        }


    So my full cod looks like this below
    Code:
    mportReact, { Component } from"react";
    import { Platform, StyleSheet, Text, View, Alert, YellowBox} from"react-native";
    import { Menu, MenuProvider, MenuOptions, MenuOption, MenuTrigger} from"react-native-popup-menu";
    
    exportdefaultclassHomeActivityextendsComponent {
    
    constructor(props) {
    super(props);
    this.state = {
    plates: ['hi', 'not',]
    //plates1:["not,"]
    
    
        }
    
    YellowBox.ignoreWarnings([
    'Warning: isMounted(...) is deprecated', 'Module RCTImageLoader'
       ]);
      }
    
    render() {
    return (
    <MenuProviderstyle={{ flexDirection:"column", padding:30 }}>
    <MenuonSelect={value=>alert(`You Clicked : ${value}`)}>
    <MenuTrigger>
    <Textstyle={styles.headerText}>DropDown Menu</Text>
    
    </MenuTrigger>
    <MenuOptions>
    {
    this.state.plates.forEach((test) => {
    <MenuOptionvalue={test}>
    <Textstyle={styles.menuContent}>{test}</Text>
    </MenuOption>
                 })
    }
    <MenuOptionvalue={"test"}>
    
    <Textstyle={styles.menuContent}>test</Text>
    </MenuOption>
    </MenuOptions>
    
    <MenuOptionvalue={"Register"}>
    <Textstyle={styles.menuContent}>Register</Text>
    </MenuOption>
    
    </Menu>
    </MenuProvider>
       );
     }
    }
    
    conststyles = StyleSheet.create({
    headerText: {
    fontSize:20,
    margin:10,
    fontWeight:"bold"
     },
    menuContent: {
    color:"#000",
    fontWeight:"bold",
    padding:2,
    fontSize:20
     }
    });
    I expected my Menu to have 2 extra options called option1 and option2 but I dont can someone tell me why?

    Thanks
    Last edited by VIPStephan; Apr 15, 2020, 03:09 PM. Reason: fixed code BB tag

  • #2
    1) this is 2020 not 1997. Assuming this is any form of normal menu you shouldn't even be using client side scripting to power it. This is one of the MANY reasons I consider react to be "just another" monument to 3i. Ignorance, incompetence, and ineptitude.

    2) Pulling an entire SQL database to an array is sloppy programming. Whatever server-side language you are using (I'm assuming that you're using node.js) should pull the results one at a time when it generates the markup.

    3) Generate markup, not that mentally challenged garbage of made-up fairy-tale tags React has you slopping together.

    I also suspect that what you're putting an H1 on shouldn't be a H1.

    Menus are lists of choices. We have HTML tags for that. Submenus are lists inside lists, we have lists for that too.... though it ALMOST looks like you want an actual SELECT or radio set.

    As to your actual question, I don't see any code that would put a set inside a set, so I'm not sure what you're really expecting this to do. Whatever it is you're trying to do with this, it's just more proof that frameworks are garbage compared to just using the underlying languages vanilla. All this react nonsense is just making you work harder, not smarter. And just because everyone is chanting "it's easier, it's easer" doesn't mean it is.

    It's almost comical how this:
    Code:
    this.state.plates.forEach((test) => { <MenuOption value={`${test}`}> <Text style={styles.menuContent}>{test}</Text> </MenuOption> })
    Seems to be an attempt to replicate some of the worst practices from PHP in JavaScript.
    I'll kill you and your dreams tonight, begin new life.
    Bleed your death upon me, let your bloodline feed my youth.
    https://cutcodedown.com

    Comment


    • #3
      Thanks, you are amazing

      Comment


      • #4
        Another convert Hooray
        Evolution - The non-random survival of random variants.
        Physics is actually atoms trying to understand themselves.

        Comment

        Working...
        X