Warning using ScrollChor with NavItem

Question

I get this error,

Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>. See HeaderNavigation > NavItem > SafeAnchor > a > ... > Scrollchor > a.

With this code,

import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar'
import {Nav, NavItem} from 'react-bootstrap';
import Scrollchor from 'react-scrollchor';


export default React.createClass ({
    render() {
        return (
            <div>
                <Navbar inverse fixedTop>
                    <Navbar.Header>
                        <Navbar.Brand>
                            M2 Consulting
                        </Navbar.Brand>
                    </Navbar.Header>
                    <Nav pullright bsStyle = "pills" active>
                        <NavItem><Scrollchor to="#services">Services</Scrollchor></NavItem>
                        <NavItem><Scrollchor to="#work">Latest Work</Scrollchor></NavItem>
                        <NavItem><Scrollchor to="#contact">Contact Us</Scrollchor></NavItem>
                    </Nav>
                </Navbar>
            </div>
        );
    }
});

I believe this is due to NavItem and Scrollchor both using a href,

How can I retain use of the styling of NavItem while using Scrollchor?

Appreciate the help.

Answer 1

NavItem has an <a> in it, so I removed it and simply used <li> instead.