Correct way (if possible) to store JSX code into a Javascript variable

Question

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 ?

Can you please elaborate more about what you're trying to achieve? href attribute expects a string. Or you put <Link> as a replacement for <a>. And your code is syntactically wrong. — luiscrjr
– luiscrjr, Commented Jan 30, 2017 at 23:17

finalfreq · Accepted Answer · 2017-01-30 23:39:01Z

15

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} />

answered Jan 30, 2017 at 23:39

finalfreq

7,0202 gold badges29 silver badges28 bronze badges

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

Comments

kamikazeOvrld · Accepted Answer · 2017-01-30 23:17:54Z

7

Use () around JSX that spans multiple lines

var href = this.props.submenu ? 'javascript:' : (<Link to="mod/admin" + this.props.link />);

answered Jan 30, 2017 at 23:17

kamikazeOvrld

9628 silver badges9 bronze badges

2 Comments

kamikazeOvrld Over a year ago

Sorry about that, I actually hadn't closely seen what exactly you were trying to achieve, what exactly are you trying to assign to href? You also have an opening parenthesis after the = sign, and you never close it

jdunning Over a year ago

Parentheses aren't required to split JSX tags across multiple lines.

Collectives™ on Stack Overflow

Correct way (if possible) to store JSX code into a Javascript variable

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related