title: Conditionally inline style a react component based on prop
body: <p>I need to set the background color of a div based on a prop passed into my react component. Inline styling of React components I am pretty clear on, but I don't know how to correctly apply the inline style to change depending on a prop. I only want to assign the value of the prop <code>rightSideColor</code> in the inline styling of <code>right-toggle</code> if the prop <code>selected</code> is equal <code>true</code>.</p>
  
  <pre><code>export default function UiToggle(props) {
    const { leftLabel, rightLabel, selected, rightSideColor, leftSideColor } = props;
  
    return (
      &lt;div className="lr-toggle-select" style={{ width: `${width}px` }} &gt;
        &lt;div className="lr-gray-background" /&gt;
        &lt;div&gt;
          {leftLabel}
        &lt;/div&gt;
        &lt;div className={'lr-toggle right-toggle' style={{ selected ? (backgroundColor: rightSideColor) : null }}&gt;
          {rightLabel}
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>