Rendering "a" with optional href in React.js

Question

I need to render a table with a link in one of the columns, and searching for a most elegant way to do it. My main problem is - not all table rows are supplied with that link. If link is present - I need that "a" tag rendered. If not - no need for "a" tag at all. Generally speaking I would like react to handle that choice (render vs not render) depending on this.state.

This is what I have at the moment.

React.createClass({
    getInitialState: function () {
        return {
            pipeline: this.props.data.pipeline,
            liveUrl: this.props.data.liveUrl,
            posted: this.props.data.created,
            expires: this.props.data.end
        };
    },

    render: function () {
        return (
            <tr className="posting-list">
                <td><a href={this.state.liveUrl} target="_blank">{this.state.pipeline}</a></td>
                <td>Posted</td>
                <td>
                    <input className="datepicker" type="text" value={this.state.posted}/>
                </td>
                <td>
                    <input className="datepicker" type="text" value={this.state.expires}/>
                </td>
                <td>UPDATE, DELETE</td>
            </tr>
        );
    }
});

This results is DOM element :

<a href="" target="_blank" data-reactid=".0.6.0.0.1:1.0.0">XING_batch</a>

This is not acceptable solution for me, because those blank hrefs are still clickable. I also tried adding some logic to getInitalState( liveUrl: (this.props.data.liveUrl !== "") ? this.props.data.liveUrl : "javascript:void;", ), which worked fine, but looks weird, and adds errors in console(Uncaught SyntaxError: Unexpected token ;)

The only way I've got left is creating 2 different components for

Answer 1

It's just JavaScript, so you can use any logic you like, e.g.:

<td>
    {this.state.liveUrl  
     ? <a ...>{this.state.pipeline}</a> 
     : this.state.pipeline}
</td>