Received `true` for a non-boolean attribute Reactjs

Question

i got this problem in the console, i tried refactoring my code and 2 things broke:

the links routing doesnt work when i dont pass in a callback function, and i got this console error error too

so the questions are:

1.how do i fix the console error?

whats wrong with my 'exact to' template string? doesnt change the url,

the component:

const {  NavLink } = ReactRouterDOM;
    export function SingleNavLink(props){
        const {url,name,onCategoryChange}=props
        const linkorbutton=(onCategoryChange)?`exact to=${url}`:`onClick={onCategoryChange(name.toLowerCase())}`
        return(
            <NavLink  linkorbutton>
              {name}
            </NavLink>
        )

You're trying to treat a string as props to a JSX tag. You need to create a hash and destructure that, e.g., {...dynamicProps}. — Dave Newton
– Dave Newton, Commented Apr 28, 2020 at 19:20
Also, a prop without a value is just a shorthand for prop={true}. — Emile Bergeron
– Emile Bergeron, Commented Apr 28, 2020 at 19:21
can u give a written example? code is not very long , i dont know anything about hashing unfortunately — Kontantin
– Kontantin, Commented Apr 28, 2020 at 19:21
Does this answer your question? How do I conditionally add attributes to React components? — Emile Bergeron
– Emile Bergeron, Commented Apr 28, 2020 at 19:22

Shubham Khatri · Accepted Answer · 2020-04-28 19:22:48Z

2

onClick must be a function. Also the syntax for onClick is incorrect because template string makes it a string which it is not.

The best solution is to store the linkProps as an object based on condition and use spread syntax to pass it to Navlink

const {  NavLink } = ReactRouterDOM;
export function SingleNavLink(props){
    const {url,name,onCategoryChange}=props
    const linkProps= onCategoryChange ? {exact: true, to: url} : { onClick: () => {onCategoryChange(name.toLowerCase())}}
    return(
        <NavLink  {...linkProps}>
          {name}
        </NavLink>
    )

answered Apr 28, 2020 at 19:22

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Received `true` for a non-boolean attribute Reactjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related