header.component.tsx(14, 15): An argument for 'e' was not provided

Question

In my reactjs component I am getting an error as:

header.component.tsx(14, 15): An argument for 'e' was not provided.

actually what is the parameter I should send?

here is the component:

import React, { LinkHTMLAttributes } from 'react';
import { LinkProps, NavLink} from "react-router-dom";

interface NaviState {
    show:boolean;
}

export class Header extends React.Component<React.LinkHTMLAttributes<any>, NaviState> {
    
    state:NaviState = {
        show:false
    }

    toggle = (e:React.MouseEvent):void =>{
        e.preventDefault();
        this.setState(prevState => ({show:!prevState.show}));
    }

    render() {
        return (
            <header>
               <h1><a className="hidden tantum-logo" href="">Welocome to Tantum website</a></h1>
               <div className={"screen " + (this.state.show ? "show":"")}></div>
               <nav className={"small " + (this.state.show ? "show" : "")}>
                   <a className="nav-icon hidden" onClick={this.toggle} href="#">tantum-Menu</a>
                   <ul>
                       <li><NavLink activeClassName="active" to="home" onClick={e => this.toggle(e)}>Home</NavLink></li>
                       <li><NavLink to="about-us" onClick={e => this.toggle(e)}>About us</NavLink></li>
                       <li><NavLink to="what-we-do" onClick={this.toggle}>What we do</NavLink></li>
                       <li><NavLink to="projects" onClick={this.toggle}>Projects</NavLink></li>
                       <li><NavLink to="contacts" onClick={this.toggle}>Contacts</NavLink></li>
                       <li><a href="#">download <span>browchure</span></a></li>
                   </ul>
               </nav>
            </header>
        )
    }
}

Actually I am trying to call the toggle function when route change. please advice. doing some change my function works. but "to" is not loading any page. thanks in advance.

kaxi1993 · Answer 1 · 2020-12-24T11:08:40.863

0

You need to do something like this:

toggle(e: React.MouseEvent) {
    e.preventDefault();
    this.setState(prevState => ({ show: !prevState.show }));
    this.props.history.push('/about-us');
}

<li><NavLink to="about-us" onClick={e => this.toggle(e)}>About us</NavLink></li>

and put your component inside withRouter

and remove this.toggle(); from componentDidMount it is useless

edited Dec 24 '20 at 11:08

answered Dec 24 '20 at 10:48

kaxi1993

4,535
4
29
47

I did the same, but `about-us` page is not loading. just getting flicker – user2024080 Dec 24 '20 at 11:03
this is not static lie adding ` this.props.history.push('/about-us');` there is number of other links are there.. is all need to added here? – user2024080 Dec 24 '20 at 11:10
yes, it in header navigation, now my function works. but no page is loading. Let me put my full component code. can you check my update with question – user2024080 Dec 24 '20 at 11:13

header.component.tsx(14, 15): An argument for 'e' was not provided

1 Answers1