I´ve written the following code using ReactJs´s JSX syntax:
import { Link } from 'react-router';
class SidebarMenuItem extends React.Component {
render() {
var href = (this.props.submenu ? 'javascript:' : {<Link to="mod/admin" + this.props.link />};
return (
<a href={href} onClick={this.selected}>
<i className={'fa ' + this.props.icon} />
<span>{this.props.title}</span>
</a>
)
}
}
But it seend that I cannot store a direct JSX code into a variable, as I got the following error:
Module build failed: SyntaxError: D:/9. DEV/client/components/App/SidebarMenuItem.js: Unexpected token, expected , (41:52)
40 |
> 41 | var href = (this.props.submenu ? 'javascript:' : {<Link to="mod/admin" + this.props.link />};
| ^
What is the correct way to store my Link component in the href variable ?
you would just write plain jsx, in your case you need to remove the brackets around the jsx, and then include the brackets around the "mod/admin" + this.props.link portion just like you would when you write in the render method.
var href = this.props.submenu ? 'javascript:' : <Link to={"mod/admin" + this.props.link} />
Use () around JSX that spans multiple lines
var href = this.props.submenu ? 'javascript:' : (<Link to="mod/admin" + this.props.link />);