Next.js: with-semantic-ui

[tharakabimal]

Below is my menu component

<Menu>
  <Menu.Item header>
     <Link href="/">
        MyBlog
      </Link>
   </Menu.Item>
   <Menu.Menu position='right'>
      <Menu.Item name='about'  active={activeItem === 'about'} onClick={this.handleItemClick} >
        <Link href="/about">
          <a>About</a>
         </Link>                                
      </Menu.Item>
      <Menu.Item name='signup'>
        <Link href="/signup">
          <a>Sign Up</a>
         </Link>
       </Menu.Item>
       <Menu.Item name='login'>
         <Link href="/login">
           <a>Login</a>
          </Link>
       </Menu.Item>
  </Menu.Menu>
</Menu>

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

And I get the following error

<a> cannot appear as a descendant of <a>. See Header > MenuItem > a > ... > a.

Your Environment

| Tech | Version |
|---------|---------|
| next | 2.4.4 |
| node | 8.0.0 |
| OS | macOS Sierra |
| browser | Chrome Version 59.0.3071.115 |

[tharakabimal]

Pardon me. This is due to my lack of knowledge.

[tharakabimal]

<Menu>
  <Link href="/">
    <Menu.Item header>Our Company</Menu.Item>                           
  </Link>
  <Menu.Menu position='right'>
    <Link href="/login">
      <Menu.Item name='about' active={activeItem === 'about'} onClick={() => console.log('About Clicked')}>
          About
      </Menu.Item>
    </Link>
  </Menu.Menu>
</Menu>

On click event doesn't get fired.

[AienTech]

@tharakabimal so, did you fixed that?

[tharakabimal]

@AienTech no I didn't.

[AienTech]

I think this bug is getting kinda critical (for me somehow)! even after updating the packages, rewriting the component, disabling semantic-ui and changing source codes nothing works! My users can't actually click any buttons!

[tharakabimal]

@AienTech I think we need to use the next/router instead of 'Link'
https://github.com/zeit/next.js/blob/v3-beta/examples/using-router/components/Header.js

[AienTech]

@tharakabimal well, I tested that too, no changes and the thing is, even if I use a simple <button>, it's not getting fired...

[AienTech]

So, as @timneutkens helped me out, the best way to fix this issue is to remove _document.js and use a base layout as made in https://github.com/zeit/next.js/tree/v3-beta/examples/layout-component

this fixed it for me. the reason for this issue is ssr from _document.js

@tharakabimal please check it and if this fixed your problem, close this issue.

[timneutkens]

Glad it works 👌🏻🙌🏻

[tharakabimal]

Here's how I managed to fix this. I'm using next/router. Let me know if there's a way to improve this?

import React, { Component } from 'react';
import Router from 'next/router';
import { Menu } from 'semantic-ui-react';


class Link extends Component {

    constructor(props) {
        super(props);

        this.state = {
            activeItem : 'ourCompany'
        }
    }

    onClickHandler (href, name) {
        return (e) => {
            e.preventDefault()

            this.setState({
                activeItem: name
            });

            Router.push(href)
        }
    }

    render () {

        const { activeItem } = this.state

        var _props = this.props;

        return (

            _props.header == true  ? 
                    <Menu.Item onClick={this.onClickHandler(_props.href)} header>
                        {_props.children}
                    </Menu.Item>
                :
                    <Menu.Item name={_props.name} active={this.state.activeItem === _props.name} onClick={this.onClickHandler(_props.href, _props.name)}>
                        {_props.children}
                    </Menu.Item>
        )
    }
}

export default Link;

import React, { Component } from 'react';
import { Menu } from 'semantic-ui-react';
import Link from './Link';

const Header = () => (
    <div>
        <Menu>
            <Link href="/" header={true}>
                Our Company
            </Link>
            <Menu.Menu position='right'>
                <Link href="/register" name='createEvent' header={false}>
                    Register
                </Link>
                <Link href="/login" name='createEvent' header={false}>
                    Login
                </Link>
            </Menu.Menu>
        </Menu>
    </div>
)

export default Header;