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

Modifying the width of a jQuery UI dialog from within the dialog box itself

I have designed an ASP.Net web page with a div and iFrame to display another page within it. Now, I am wondering if there is a way to change the width of the dialog from a button inside the dialog itself... Is this achievable? Thank you. ...

There was a problem during the installation of the React application

I encountered an error during the installation of my react app: npm ERR! code ERR_OSSL_PEM_NO_START_LINE npm ERR! error:0909006C:PEM routines:get_name:no start line npm ERR! For more details, check out the log at: npm ERR! C:\Users\User&bso ...

Modify every audio mixer for Windows

Currently working on developing software for Windows using typescript. Looking to modify the audio being played on Windows by utilizing the mixer for individual applications similar to the built-in Windows audio mixer. Came across a plugin called win-audi ...

Adjust the size of col-lg-3

Is there a way to adjust the size of my col-lg based on different screen resolutions? I'm looking for a solution that can change the size of col-lg depending on the screen resolution. For example: .col-lg-3 { /* styles for screens with 1366x768p ...

Utilize Javascript to establish a fresh attribute by analyzing other attributes contained in an array within the object

Currently, I am working on a data structure that looks like this: masterObject: { Steps: [ { step: { required: false, }, step: { required: false, }, step: { required: false, }, }, ] } ...

Why isn't my JavaScript AJAX PHP if statement functioning properly?

I have been struggling with this issue for more than two hours now and cannot seem to find a logical solution. When I remove the If statement highlighted by --> this arrow, the alert() function works perfectly fine. It triggers when I simply use if(true) ...

How to eliminate query strings from the current page's URL using JavaScript

Looking for a way to remove the querystring from the current page URL using JavaScript when a button is clicked. Can someone please provide the necessary code for this? ...

breaking up the text enclosed in parentheses

Within my code, I have a variable var string = (2200 x 1500)(2441 x 1610) The goal is to split this string into arrays based on the content within the brackets. Meaning that href[0] = (2200 x 1500) and href[1] = (2441 x 1610) I attempted the following ap ...

Forming a header area by utilizing a 960 Grid container

I'm in the process of designing a website utilizing the 960 Grid system. The header consists of three parts: the logo, the navigation, and the login form. I've implemented media queries to center both the logo and the login section when the pag ...

Finding the difference or sum within an array to identify the two numbers that produce a new array

In order to clarify, I am looking for a method to identify the two smallest numbers in a sorted array that will result in a specific number when subtracted. The process can be broken down into the following steps: Iterate through the array and designate ...

Can dynamic loading JavaScript be debugged using a debugger such as WebKit, FireBug, or the Developer Tool in IE8?

After asking a question on Stack Overflow, I have successfully written JavaScript functions for loading partial views dynamically. However, debugging this dynamic loading script has been a challenge for me due to all loaded JavaScript being evaluated by th ...

Errors persist with Angular 2 iFrame despite attempts at sanitization

Attempting to add an iFrame within my Angular 2 application has been challenging due to the error message that keeps popping up. unsafe value used in a resource URL context The goal is to create a dynamic URL to be passed as a parameter into the iFrame ...

Is it possible to create an API directly within the URL of a React.js application, similar to how Next.js allows?

When using Next.js, I can access my application on localhost:3000, and also access my API from localhost:3000/api/hello. I'm curious if there is a way to achieve this same setup with React.js and another framework like Express.js? If Next.js is not ...

Error: Unable to access the 'clearAsyncValidators' property as it is undefined when running Jest tests on an Angular component

Encountering an Error While Testing Components with Jest Here is my code block for onClickLogin() method: onClickLogin() { if(this.loginForm.valid) { this.api.getLoginData().subscribe(res => { const user = res.find(a => { ...

In strict mode, duplicate data properties are not allowed in object literals when using grunt-connect-proxy

I recently started following a tutorial on AngularJS titled "Hands on Angularjs" by Tutsplus. In the tutorial, the instructor uses the grunt-connect-proxy package to redirect ajax requests to a Rails server running on localhost:3000. However, I believe the ...

The correct method for accessing object data in Reactjs

My challenge lies in retrieving object data using Reactjs from my Atlassian instance. Upon running the code, I can see the record displayed below: {"creator_name":"Nancy More","current_time":"10/21/2023, 12:37:11 PM" ...

Remove a row from a Jquery Jtable

I am running into difficulties when trying to delete rows, and I suspect that the issue might be related to the post[id] not being properly sent. Although the delete message appears, the row is not actually deleted. Below is the snippet of my code: JAVASC ...

What could be the reason behind the error message "Java heap space exception in Eclipse" appearing while trying to use JavaScript autocomplete?

Whenever I attempt to utilize a JavaScript template on Eclipse, the program always freezes, displaying an error message stating: "Unhandled event loop exception Java heap space." To troubleshoot this issue, I initiated a top command in Ubuntu for both the ...

Is there a way for me to revert back to my initial list after the 3rd click?

Front end development const [clientList, setClientList] = useState([]); //store all data from the database in a list //make an axios request to retrieve data from the database useEffect(() => { Axios.get("http://localhost:3001/clients&quo ...

Utilize new metadata options to incorporate an external style and script file

I'm looking to incorporate external CSS and scripts into my NextJS app (NextJS version 13.4.13). Here's what I need: Style https://company.com/statics/1/package/dist/1/styles/dls.min.css Script https://company.com/statics/1/package/dist/1/ ...