Using props as the key property in React inline style

Question

In React, inline styles are specified with an object whose key is the camelCased version of the style name. How would you use props as the key value?

E.g.:

const {
    position
} = this.props;

let triangleStyle = {
    borderLeft: '5px solid transparent',
    borderRight: '5px solid transparent',
    `border${position}`: '5px solid red'
};

function Component() {
    return <div style={triangleStyle}></div>;
}

Answer 1

Since we are computing the key value for the style we can could:

Put all the logic inside the Component, using computed property names

function Component({ position }) {
  const triangleStyle = {
    borderLeft: '5px solid transparent'
    borderRight: '5px solid transparent',
    [`border${position}`]: '5px solid red',
  }

  return <div style={triangleStyle} />
}

Alternatively, extract the triangle styles to a function

const getTriangleStyle = position => ({
  borderLeft: '5px solid transparent'
  borderRight: '5px solid transparent',
  [`border${position}`]: '5px solid red',
})

function Component({ position }) {
  return <div style={getTriangleStyle(position)} />
}