React to add slide pane having some trouble

Question

Im beginner for *Reactjs**, im tried to add this slide pane for my react project. added slide pane is not working correctly, anyone know how to add this correctly for the reactjs.

Stack blitz Here Thanks

My code part

AgentView.js

    import React, { Component } from 'react';
    import {
      Button,
      Card,
      CardBody,
      CardGroup,
      Col, Container,
      Form,
      Input,
      InputGroup,
      InputGroupAddon,
      InputGroupText,
      Row
    } from "reactstrap";

    import './AgentView.css';
    class AgentView extends Component {
      render() {
        return (
          <Container>
            <div id="mySidepanel" class="sidepanel">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<button class="openbtn" onclick="openNav()">☰ Toggle Sidepanel</button>

          </Container>


        );  }

    }





    export default AgentView;

AgentView.test.js

 import React from 'react';
    import ReactDOM from 'react-dom';
    import { MemoryRouter } from 'react-router-dom';
    import AgentView from './AgentView';

    it('renders without crashing', () => {
      const div = document.createElement('div');
      ReactDOM.render(<MemoryRouter><AgentView/></MemoryRouter>, div);
      ReactDOM.unmountComponentAtNode(div);




     function openNav() {
  document.getElementById("mySidepanel").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidepanel").style.width = "0";
}
      })();
    });

Possible duplicate of [Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag](https://stackoverflow.com/questions/31284169/parse-error-adjacent-jsx-elements-must-be-wrapped-in-an-enclosing-tag) — Pixelomo, Jun 21 '19 at 04:19

Pixelomo · Accepted Answer · 2019-06-21T04:20:23.010

Read the error

"JSX expressions must have one parent element."

Googling this error will quickly give you the answer.

React is built with JSX and one of the rules is that each expression must be wrapped in a parent. Your sidePanel div and button were siblings without a parent. So wrapping them in a div fixes the issue and the component will render.

https://stackblitz.com/edit/react-ni1uvx

render() {
    return (
      <div>
        <div id="mySidepanel" class="sidepanel">
          <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Clients</a>
          <a href="#">Contact</a>
        </div>
        <button class="openbtn" onclick="openNav()">☰ Toggle Sidepanel</button>
      </div>
    );
  }

Sir, Thanks for your guidance , but why not working button and panel — core114, Jun 21 '19 at 04:20
@core114 looks like your openNav/closeNav functions need to be fixed. onClick you should setState and based on state show/hide nav. i.e. this.state.openNav === true — Pixelomo, Jun 21 '19 at 04:23

React to add slide pane having some trouble

1 Answers1