I'm new to React, and I'm working with an existing project that I have to modify.
I need to add a Sidebar, and following this tutorial I've simply created a component MySidebar this way:

import React from "react";
import {slide as Menu } from 'react-burger-menu'

export class MySidebar extends React.Component {


  constructor(props) {
    super(props);
  }

  render() {


    return (
        <Menu>
            <a id="Project1">Project 1</a>
            <a id="Project2">Project 2</a>
            <a id="Project3">Project 3</a>
        </Menu>
    );
  }
}

Then in App.js I have this:

render() {
      return (
        <div className="App">
         <MySidebar 
      isOpen={true}
      disableCloseOnEsc= {true}
      style={{
          'position': 'fixed',
          'left': '0px',
          'width': '30px',
          'height': '100%',
          'display':'inline-block'
        }}>
        </MySidebar>
          <Particles
            params={{
              "particles": {
                "number": {
                  "value": 100
                },
                "size": {
                  "value": 3
                }
              }
            }}
          </Particles>
          <ProjectSliderComponent projectListId={this.state.projectList}></ProjectSliderComponent>
        </div>
      );
  }

Particles is a class for the background, while ProjectSliderComponent is the content of the main page. MySidebar is not shown; where can I look for the error? I'm confused

0 Answers