10

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;
2
  • 1
    The error message is clear enough and explains how to fix issue: Attribute value is expected to be String. So you have to pass string, not boolean.
    – hindmost
    May 3, 2019 at 9:45
  • @hindmost when I pass exact: 'true' I receive Warning: Failed prop type: Invalid prop exact of type string supplied to Route, expected boolean. May 3, 2019 at 9:48

5 Answers 5

9

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>
0
3

In my case it was exact="true" that solved the issue.

0
export const Button = styled.button`
    cursor: pointer;
    text-transform: uppercase;
    padding: 10px;
    display: inline-block;
    min-width: 12rem;`enter code here`
    text-align: center;

    ${props => (props.secondary ?
        `border: none;
        color: gray;` :
        standardBorder
    )}
`

export const LinkButton = props => (
    <Button {...props}>
        <Link to={props.to} href={props.to}>{props.children}</Link>
    </Button>
)
0

Add default as a false, it's making sure that exact is not undefined or null when it is not set/present in your TOP_LEVEL_ROUTES.

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

1
  • can you console.log and see the type of exact in .map May 3, 2019 at 10:01
0

The real problem is that exact has nothing to do with <Button>. It's used for matching the URL (e.g., to highlight a NavLink when appropriate), whereas the <Button> is simply pointing to a location.

Your fix works, but it just adds an attribute that is never used. Instead, remove the line with exact.

const navigationList = TOP_LEVEL_ROUTES
    .map(({ exact, path, name }) => (
      <Button
        component={Link}
        to={path}
        key={path}
        exact={`${exact}`}                <--- doesn't do anything
        someOtherUnusedAttribute={true}   <--- same problem
      >
        {name}
      </Button>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.