convert C# Razor condition block to React.js code

user_5355872 0
Viewed 42

How to convert code that has nested tags and conditions. Razor C# code, The original source to be converted:

@if (isOnline == false)
    {
        <div class="container">
            @if (ViewBag.IsLink1 == "True")
            {
                @Html.ActionLink("Link1", "Index", "Home1")
            }
            @if (ViewBag.IsLink == "True")
            {
                @Html.ActionLink("Link2", "Index", "Home2")
            }
        </div>
    }
    else
    {
       <p>this is P tag...</p>
    }

and Failed attempt to convert code to Reactjs:

<Sample isOnline={false} IsLink1="True" IsLink2={"True"} />

function Sample(props) {
    return (props.isOnline == false) ?
        <div className="container">
            (props.IsLink1 == "True") ?<a href="/Home1/Index">Link1</a>:''
            (props.IsLink2 == "True") ?<a href="/Home2/Index">Link2</a>:''
        </div>
        : <p>this is P tag...</p>
}

The return code is rendered in html as follows :

<div class="container">(props.IsLink1 == "True") ?<a href="/Home1/Index">Link1</a>:'' (props.IsLink2 == "True") ?<a href="/Home2/Index">Link2</a>:''</div>
single-page-application reactjs razor
1 Answers

in jsx you should wrap your js code with curly braces so your Sample component should look likde

function Sample(props) {
    return (props.isOnline == false) ?
        <div className="container">
            {(props.IsLink1 == "True") ?<a href="/Home1/Index">Link1</a>:''}
            {(props.IsLink2 == "True") ?<a href="/Home2/Index">Link2</a>:''}
        </div>
        : <p>this is P tag...</p>
}
user_111684090
Related