Conditional svg Inline Style in ReactJs

Question

Am I doing the conditional inline correctly. This svg is an x sign and toggle with to make it + sign.

      <svg viewBox='0 0 26 26' focusable='true' style={toggleShow ? {  transform: translateY(-50%) rotate(-45deg) }  : null; } >
        <path d='M10.5 9.3L1.8 0.5 0.5 1.8 9.3 10.5 0.5 19.3 1.8 20.5 10.5 11.8 19.3 20.5 20.5 19.3 11.8 10.5 20.5 1.8 19.3 0.5 10.5 9.3Z'></path>
      </svg>

Answer 1

@Joeffrey Chaucer, that's right, but you need to add single quotes around the transform value.

 <svg viewBox='0 0 26 26' focusable='true' style={toggleShow ? {  transform: 'translateY(-50%) rotate(-45deg)'}  : null} >
    <path d='M10.5 9.3L1.8 0.5 0.5 1.8 9.3 10.5 0.5 19.3 1.8 20.5 10.5 11.8 19.3 20.5 20.5 19.3 11.8 10.5 20.5 1.8 19.3 0.5 10.5 9.3Z'></path>
  </svg>