Creating a dynamic menu with reactjs and MySQL

Hello all campers!

First of all, the issue I have now is not a challenge inside the freecodecamp itself, it’s a outside project that I have been working on. The project is a mix of reactjs, MySQL database.
I have used the facebook´s create React app: GitHub - facebook/create-react-app: Set up a modern web app by running one command. as a base.

What I want is a dynamic menu with the end result:

image

My structure of my database is this:

I did some data on the insert tab section, which gave this result in the browse tab section:

I did follow this video on youtube to be able to create a dropdown menu:

As a result, I can now pick an item from the dropdown and the picked value will be shown, as the dropdown disappear. It shows the latest selected value. I want to replace the string of text inside the App.js file(javascipt objects) to instead fetch the data of my images from my database. I have done a function that fetch all my 12 images which I want to fetch, but the problem is how to combine them so that each will be able to be clickable, so the user can be able to navigate to the 12 different pages.

Here is the function I were talking about:

renderSubmenu = () =>
    this.state.allMenus
      .filter(menu => menu.parentId == 2)
      .map(menu => (
        <div key={menu.id} className="submenu">
          <a href={menu.linkUrl}>
            <img src={menu.picUrl} alt={menu.picName} />
          </a>
        </div>
      ));

Here is the part I want to combine with:

<div
        style={{display: this.state.showItems ? 'block' : 'none'}}
        className="select-box--items"
        >
             
            {
            
            this.state.items.map(item => <div key={ item.id }
            onClick={() => this.selectItem(item)}
            className={this.state.selectedItem === item ? 'selected' : ''}
>               
                
                { item.value }
               
                
                  
    </div>)

Here is the full code for the App.js I have the SelectBox component that have the javascript objects with its value and id:

import React, { Component } from 'react';
import './sass/style.scss';
import SelectBox from './features/select-box';

class App extends Component {
  render() {
/* klassen Homepage ska till Homepage.js komponenten senare */
      return (
      
      <div className="App">
        
          
       
          
          <div>
          
          <h1>test2</h1>
          
            <div>
           
          
                <SelectBox
          
                   items={[
          
          
          { value: 'Dragons', id: 0 },
          { value: 'Water dragon', id: 1 },
          { value: 'Wood dragon', id: 2 }, 
          { value: 'Brass dragon', id: 3 },
          { value: 'Fire dragon', id: 4 },
          { value: 'Forest dragon', id: 5 },
          { value: 'Lightning dragon', id: 6 }, 
          { value: 'Ice dragon', id: 7 },
          { value: 'Earth dragon', id: 8 },
          { value: 'Light dragon', id: 9 },
          { value: 'Bronze dragon', id: 10 }, 
          { value: 'Dark dragon', id: 11 },
          { value: 'Metal dragon', id: 12 },
          { value: 'test dragon', id: 13 },
          ]} 
          
          />
            </div>
          </div>  
          
          
        <p className="TEST">  </p>
        
      
        <div className="homepage">
        
            <div className="container_header">
            </div>

           <div className="container_menu">
                
            </div>

            <div className="container_stats">
          
         
            </div>

            <div className="container_facts">
            </div>

            <div className="container_footer">
            </div>
        
        </div>
        
    </div>

      
      
      );
        
  }
}

export default App;

Here is the index.js code (have the component SelectBox inside it):

import React from 'react'
import '../../sass/style.scss';

class SelectBox extends React.Component {
    
    constructor(props) {
    super(props);
        
        this.state = {
            items: this.props.items || [],
            showItems: false,
            selectedItem: this.props.items && this.props.items[0],
            allMenus: [],
            
        }
     }
    
    fetchAllMenus = () => {
    fetch("http://localhost/dragonology/server/fetchMenu.php")
      .then(response => response.json())
      .then(data => {
        console.log(data);
        this.setState({ allMenus: data });
      });
  };

  componentDidMount() {
    this.fetchAllMenus();
  }

renderMenus = () =>
    this.state.allMenus
      .filter(menu => menu.parentId !== null)
      .map(menu => (
        <div key={menu.id}>
          <img src={menu.picUrl} alt={menu.picName} />
        </div>
      ));

renderSubmenu = () =>
    this.state.allMenus
      .filter(menu => menu.parentId == 2)
      .map(menu => (
        <div key={menu.id} className="submenu">
          <a href={menu.linkUrl}>
            <img src={menu.picUrl} alt={menu.picName} />
          </a>
        </div>
      ));



renderHome = () =>
this.state.allMenus
    .filter(menu => menu.id == 1)
    .map(menu => (
          <div className="select-box--home" key={menu.id}><img src={menu.picUrl} alt={menu.picName} /> </div>
    ));


renderDragons = () =>
this.state.allMenus
    .filter(menu => menu.id == 2)
    .map(menu => (
          <div className="select-box--dragons" key={menu.id}><img src={menu.picUrl} alt={menu.picName} /> </div>
    ));

renderTest = () =>
this.state.allMenus
    .filter(menu => menu.id == 3)
    .map(menu => (
          <div className="select-box--test" key={menu.id}><img src={menu.picUrl} alt={menu.picName} /> </div>
    ));

renderCookie = () =>
this.state.allMenus
    .filter(menu => menu.id == 4)
    .map(menu => (
          <div className="select-box--cookie" key={menu.id}><img src={menu.picUrl} alt={menu.picName} /> </div>
    ));


dropDown = () => {
  this.setState(prevState =>({
      showItems: !prevState.showItems,
  }))  
} 

selectItem = (item) => this.setState({
    selectedItem: item,
    showItems: false,
})

render () {
    return <div> 
        
        
    <div className="select-box--box"> 
           
          { this.renderHome() } 
        { this.renderDragons() }
   
     <div 
    className="select-box--container"
    >
                
        <div 
            className="select-box--selected-item"
            > { this.state.selectedItem.value }</div>
                
        <div 
    className="select-box--arrow"
    onClick={this.dropDown}
    >
        
        <span
        className={`${this.state.showItems ? 'select-box--arrow-up' : 'select-box--arrow-down'}`} />
    </div>
                
    <div
        style={{display: this.state.showItems ? 'block' : 'none'}}
        className="select-box--items"
        >
             
            {
            
            this.state.items.map(item => <div key={ item.id }
            onClick={() => this.selectItem(item)}
            className={this.state.selectedItem === item ? 'selected' : ''}
>               
                
                { item.value }
               
                
                  
    </div>)
        } 

        </div>
    </div>

             { this.renderTest() }  
          
           { this.renderCookie() }  

       { this.renderSubmenu() } 


        
            </div>
</div>
}

}

export default SelectBox;

As a note I dont use the renderMenus function at the moment because I did instead 4 other functions which display only one image each from the database. The renderMenus function display all four main menus and if you set a ! mark it will display all my submenus,12.

Another problem I have is that I had to use double equals == instead of triple equals === because otherwise it didn’t take out the image at all from my database.

Here Is the fetchMenu.php code if you need it:


<?php
    /* This file fetches all the DropdownMenu buttons from the SQL database table menus and order the buttons by id. */
    include_once 'database.php';
    $statement = $pdo->prepare("SELECT * FROM menus ORDER BY id ASC");
    $statement->execute();
    $data = $statement->fetchAll(PDO::FETCH_ASSOC);
    echo json_encode($data, JSON_PRETTY_PRINT);
?>

Sorry for not being able to use the codesandbox, because I´m new to it, so I don´t know how to, I have tried.

If you need the scss file to be able to help me or anything else I will provide it just ask, thank you in advance.