React does not show css style in nested <a></a>

Question

I am starting with react and I would like to make simple navigation bar for beginning. I am using component for item in the list of links. Which is used in the component with whole list and than it´s rendered by another component.

This is one item in the list.

import React from 'react';
import ReactDOM from 'react-dom';

export default class NavLi extends React.Component {

render() {
    return (
        <li className="nav-item active"><a className="nav-link" href={this.props.href}>{this.props.children}</a></li>
    );
}
}

Called by this class:

import React from 'react';
import ReactDOM from 'react-dom';
import NavLi from './NavLi';

export default class NavUl extends React.Component {

render() {
    return (
        <ul className="nav navbar-nav">
            <NavLi href="home">Home</NavLi>
            <NavLi href="about">About</NavLi>
            <NavLi href="contact">Contact</NavLi>
        </ul>
    );
}
}

And again and again.

import Log from './Log';
import NavUl from './NavUl';

export default class Nav extends React.Component {

render() {
    return (
        <nav className="navbar navbar-fixed-top navbar-dark bg-inverse">
            <div className="container">
                <a className="navbar-brand" href="#">ProjectName</a>
                <NavUl/>
                <Log/>
            </div>
        </nav>

    );
}
}

.

import React from 'react';
import ReactDOM from 'react-dom';
import Nav from './navbar/Nav';

class App extends React.Component {
  render() {
    return (
        <div>
            <Nav/>
        </div>
    );
}
}

ReactDOM.render(<App />, document.getElementById('react'));

This whole thing is in .html like this: <div id="react"></div>

I am using bootsrtap4 and the problem is, that in every item in the list of navigation bar I can´t see css class at <a></a> when I run the app. Everything worsk fine, but in tags <a></a> are no classess at all after running this app screenshot from browser.

Any advice why this is not working? Thank you.

Answer 1

I think you didn't define the style in CSS file. Can you find a style of 'nav-link' in CSS file? In my case, the class did not appear when I don't define the style in CSS file.

Answer 2

From the spec:

Content model: Transparent, but there must be no interactive content or a element descendants.

Nested <a> elements are forbidden in HTML. You are bouncing off error recovery in the browser.