JAVASCRIPT

conditional jsx property

render() {
  return (
    <a className="navbar-brand" {... url ? {href: url} : {}}>Logo</a>
  )
}

add conditional attribute jsx react

return (
 <Button {...(condition ? {className: 'btn btn-primary'} : {})} />
);

How do I conditionally add attributes to React components?

var InputComponent = React.createClass({
    render: function() {
        var required = true;
        var disabled = false;

        return (
            <input type="text" disabled={disabled} required={required} />
        );
    }
});

JSX Conditionals: &&

/*
&& works best in conditionals that will sometimes do an action, but other times do 
NOTHING at all.
*/

const tasty = (
  <ul>
    <li>Applesauce</li>
    { !baby && <li>Pizza</li> }
    { age > 15 && <li>Brussels Sprouts</li> }
    { age > 20 && <li>Oysters</li> }
    { age > 25 && <li>Grappa</li> }
  </ul>
);

/*
If the expression on the left of the && evaluates as true, then the JSX on the 
right of the && will be rendered. If the first expression is false, however, then 
the JSX to the right of the && will be ignored and not rendered.
*/

react conditional style render

style={{backgroundColor: $post.type === "team_member" ? 'green': 'not_a_team_member'}}

JSX and conditional

// JSX and conditional
// In JSX, && is commonly used to render an element based on a boolean condition. && works best in conditionals that will sometimes do an action, but other times do nothing at all.

// If the expression on the left of the && evaluates as true, then the JSX on the right of the && will be rendered. If the first expression is false, however, then the JSX to the right of the && will be ignored and not rendered.
// All of the list items will display if
// baby is false and age is above 25
const tasty = (
  <ul>
    <li>Applesauce</li>
    { !baby && <li>Pizza</li> }
    { age > 15 && <li>Brussels Sprouts</li> }
    { age > 20 && <li>Oysters</li> }
    { age > 25 && <li>Grappa</li> }
  </ul>
);