Problems With React.js Conditional Statement Within Another Conditional Statement

The intention is to conditionally display elements if 'sortBy' is equal to a particular value.. I can do a single conditional statement but when I add another inside the first one

Solution 1:

You missed a ? as well as the false case of first condition, You need to write it like this:

{sortBy === 'LastName' ?
    <span>
    {
        sortDirection === 'Descending' ? 
            <spanclassName='glyphicon glyphicon-sort-by-attributes'></span>
        : 
            <spanclassName='glyphicon glyphicon-sort-by-attributes-alt'></span>
    }
    </span>
:
    null//or some element
}

If you don't want to render anything in false case you can write it like this also:

{sortBy === 'LastName' && <span>
    {
        sortDirection === 'Descending' ? 
            <spanclassName='glyphicon glyphicon-sort-by-attributes'></span>
        : 
            <spanclassName='glyphicon glyphicon-sort-by-attributes-alt'></span>
    }
    </span>
}