javascript - Setting react-router link prop with a condition statement returns a syntax error -

i trying write render function sets onlyactiveonindex={true} on react-route component when passed correct argument.

so instead of repeating whole link tried writing code:

  render() {     return (       <div classname={`navbar navbar-${this.props.linksdata.length}`}>         {this.props.linksdata.map((linkdata) => {           return(             <div classname="navbar-link-container" key={linkdata.to}>               <link               activeclassname="navbar-active-link"               {linkdata.to === '/' ? onlyactiveonindex={true} : null}               to={linkdata.to}>                 <i classname="navbar-icon material-icons">{linkdata.icon}</i>                 <span classname="navbar-link-text">{linkdata.text}</span>               </link>             </div>           )         })}       </div>     )   } 

but following syntax error:

syntax error: unexpected token, expected ... (16:15)

what correct way conditionaly set prop on react component (if link not point index route not want property there @ all).

for wrote following workaround:

onlyactiveonindex={linkdata.to === '/' ? true : false} 

but if in future want set conditional props?

this should work

<link   activeclassname="navbar-active-link"   onlyactiveonindex={linkdata.to === '/'}   to={linkdata.to}>     <i classname="navbar-icon material-icons">{linkdata.icon}</i>     <span classname="navbar-link-text">{linkdata.text}</span> </link> 

as optional props question, should work,

render() {   let props = {}   showname && (props.name = 'tyler')   showage && (props.age = 27)    return <mycomponent {...props} /> } 

where you're settings properties on object if condition met, then, can spread object component.