Creating a fluid side navigation bar in reactjs

Can someone please help me with the following code issue? I am encountering an error related to the script tag when running it in ReactJS, although it works fine in a simple HTML file.

Upon starting npm, an error is displayed pointing to line number which prevents the code from running.

./src/topbar/Navbar.js Syntax error: C:/Users/root/mft/src/topbar/Navbar.js: Unexpected token, expected } (34:62) 32 | 33 | function openNav() { > 34 | document.getElementById("mySidenav").style.width = "250px"; | ^ 35 | document.getElementById("box1").style.width = "100%"; 36 | } 37 |

import React from 'react';
import './Navbar.css';

class Navbar extends React.Component {
render(){
return(
<div id = "navbar">
 <div class ="box">
  <div class="side" onclick={openNav()}>
<div class="line-separator"></div>
<div class="line-separator"></div>
<div class="line-separator"></div>
</div>
 <h1 class="right">A1MAN </h1>
  <div class="text">
  <h1>A1MAN </h1>
   </div>
   </div>
<div id="box1" class="back">
    <div href  class="closebtn" onclick={closeNav()}></div>

</div>


<div id="mySidenav" class="sidenav">
  <a href="">About</a>
  <a href="">Services</a>
  <a href="">Clients</a>
  <a href="">Contact</a>
</div>
<img alt="flower" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg"/>
<script>

</script>

</div>
       );
function openNav() {
    document.getElementById("mySidenav").style.width="250px";
    document.getElementById("box1").style.width = "100%";
}

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

}
}

export default Navbar;

Answer №1

It appears that the error is due to a mismatch in closing curly brackets.

import React from 'react';
import './Navbar.css';

class Navbar extends React.Component {
    render() {
        return (
            <div id = "navbar">
                ...
                <img alt="flower" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg"/>
            </div>);
    } // <-------------------------------- This was misplaced

    // These methods should be part of the component class, not inside a script tag
    openNav() {
        document.getElementById("mySidenav").style.width="250px";
        document.getElementById("box1").style.width = "100%";
    }

    closeNav() {
        document.getElementById("mySidenav").style.width = "0";
        document.getElementById("box1").style.width = "0";
    }
}

export default Navbar;

Additionally, there are some anti-patterns in the code sample:

  1. Avoid using <script> tags in favor of component methods.

  2. Avoid direct manipulation of the DOM with document: consider using state (e.g. isOpen) or refs instead.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Excessive Spacing Below Picture

I am trying to position an image and a div directly beneath it, but I am encountering an issue with a visible margin between the two elements. You can view the code snippet here: http://jsfiddle.net/d3Mne/1/ Upon further investigation, I have noticed that ...

Only run the final AJAX request

My goal is to use jQuery ajax and php for field validation. Currently, the issue I am facing is that if I type 3 valid characters followed by an invalid one, the request is sent to the PHP file four times. I want to optimize this so that only the last req ...

Using Redux Form to set the default checked radio button in a form setting

I'm currently attempting to make a radio button default checked by using the code below: import { Field } from "redux-form"; <Field name={radio_name} component={renderField} type="radio" checked={true} value={val1} label="val1"/> <Field na ...

Tips for successfully passing multiple data IDs in a Bootstrap modal

Greetings! I am currently facing a challenge with passing multiple data IDs into a bootstrap modal. When I manually assign the data IDs, everything works perfectly: <a id="testB" href="#my_modal2" data-toggle="modal" data-book-id='{"id":10,"name ...

Symfony: Enhancing array elements with updated bootstrap progress bar

I'm facing a challenging issue that I need help with. Currently, I have a command set up to send a large number of emails (around 300 or more) every 5 minutes using cron in order to distribute a newsletter. My goal is to keep track of how many emails ...

[Vue alert]: Issue in created function: "TypeError: Unable to assign value to undefined property"

I'm currently in the process of developing a VueJS application where I have implemented a child component called Child.vue that receives data from its parent. Child.vue export default{ props:['info'], data: function(){ ...

Caution: Anticipated server HTML to include a corresponding <section> inside <div>. ---- Next.js / react

I'm facing some issues with my first experience using next.js and I could really use some help... While working on my app, I noticed a problem in the dev tools that I couldn't figure out. https://i.stack.imgur.com/UdhVh.png At first, I thought ...

Adjusting the header background color as the user scrolls on a Next.js webpage

When looking at the code below: import { useEffect } from "react"; import Link from "next/link"; import styles from "./header.module.css"; import { useRouter } from "next/router"; export default function Header() { ...

Where is the location of the directory on the hard drive that was created using the getDirectory() method in HTML5?

I have been working on creating, deleting, and reading directories but I am unsure of where they are located on the hard drive. fs.root.getDirectory('something', {create: true}, function(dirEntry) { alert('Congratulations! You have succes ...

Is there a way to combine all the text on an HTML page into one continuous string without losing the CSS styling?

If I want to change all the text within every HTML element on a page to just the letter "A", how would I do it? Let's say I have a webpage set up like this: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

Unique: "Unique One-Step Deviation in Date Comparison"

A Little Background Information: I am working with data points that span from the current day to 5 days ahead, in 3-hour intervals (such as 10pm, 1am, 4am, 7am...). My goal is to organize these data points into arrays sorted by date, with each array repre ...

Converting JSON to Date and storing it as a List in the Controller of an MVC3 application

Within a View, the model is sent encoded like so: var model = '@Html.Raw(Json.Encode(Model))'; to a Controller Action. The model consists of a list of movies, each containing a release Date. Shown below is the Controller action method: [HttpPo ...

React component will automatically rerender if the cache is disabled in the Chrome browser

In my React application, I am utilizing 'react-image-pan-zoom-rotate' to display images. Visit the GitHub repository here The image I am displaying is sourced from an external service and passed to both libraries for rendering. Lately, I have ...

Is it possible to utilize the same database connection for multiple routes in an

I have taken inspiration from Express's route-separation example and created a Node.js app. Now, I aim to enhance it by integrating the MongoDB driver Mongoose for listing Users and Kittens. var express = require('express'); var app = expre ...

What is the method to retrieve the unique individual IDs and count the number of passes and fails from an array

Given a data array with IDs and Pass/Fail statuses, I am looking to create a new array in Angular 6 that displays the unique IDs along with the count of individual Pass/Fail occurrences. [ {"id":"2","status":"Passed"}, {"id":"5","status":"Passed"}, {"id": ...

OpenLayers 4 - adjusting the view to the boundaries of chosen features

Hey everyone, I ran into an issue yesterday with zooming to selected features and I'm hoping someone can point me in the right direction. Here's the situation... I'm working on implementing an autocomplete/search bar using the Materialize M ...

Discovering elements using Selenium in a JavaScript popup box

The issue at hand is rather straightforward. I am faced with the task of clicking on an element within a popup that has been dynamically generated by JavaScript code. The challenge arises as the page is solely accessible in Internet Explorer and the elemen ...

Adapting the current codebase to be compatible with Typescript

Currently, my codebase is built with redux, redux-saga, and react using plain Javascript. We are now considering incorporating Typescript into the project. Some questions arise: Can plain Javascript files coexist with tsx code? I believe it's possibl ...

Launch Internet Explorer and input variable values (such as ScriptEngineMinorVersion)

I am looking to create a script that can open a file and inject values into it. Here is a basic example: Set WshShell = WScript.CreateObject("WScript.Shell") Return = WshShell.Run("iexplore.exe google.com", 1) However, I also need to modify some variab ...

Is it better to verify the data from an ajax request or allow JavaScript to generate an error if the data is empty

Is it better to check if the necessary data is present when handling success data in jQuery, like this? success: function (data) { if (data.new_rank !== undefined) { $('._user_rank').html(data.new_rank); } } Or should you just l ...