React router warning: Received `true` for a non-boolean attribute `exact`

I receive console warning during Buttons mapping with prop “exact”:

Warning: Received true for a non-boolean attribute exact.

If you want to write it to the DOM, pass a string instead: exact=”true” or exact={value.toString()}.

I guess there are no mistakes in my code

const TOP_LEVEL_ROUTES = [
  {
    name: 'Home',
    path: HOME_URL,
    component: HomeView,
    exact: true
  },
  {
    name: 'Table',
    path: TABLE_URL,
    component: TableView
  },
  {
    name: 'About',
    path: ABOUT_URL,
    component: AboutView
  }
];

import React from 'react';
import { Link } from 'react-router-dom';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Button from '@material-ui/core/Button';

import { LOGO_URL, HOME_URL, TOP_LEVEL_ROUTES } from 'consts';
import styles from './Header.scss';

const Header = () => {
  const navigationList = TOP_LEVEL_ROUTES
    .map(({ exact, path, name }) => (
      <Button
        component={Link}
        to={path}
        key={path}
        exact={exact}
      >
        {name}
      </Button>
    ));

  return (
    <AppBar className={styles.header}>
      <Toolbar className={styles.headerToolbar}>
        <Link to={HOME_URL}>
          <img
            src={LOGO_URL}
            alt='FCIT logo'
          />
        </Link>
        <nav className={styles.headerNavbar}>
          {navigationList}
        </nav>
      </Toolbar>
    </AppBar>
  );
};

export default Header;

Answer

Fixed it with template literal:

const navigationList = TOP_LEVEL_ROUTES
    .map(({ exact, path, name }) => (
      <Button
        component={Link}
        to={path}
        key={path}
        exact={`${exact}`}
      >
        {name}
      </Button>

Advertisement

Answer