How can I use a javaScript object key's value in css?

Question

I'm mapping over an array of objects in react and rendering it to the screen with each object getting its own card, pretty basic. My problem is every object has a different hex color property in it and using Sass, I want to set the font color for each card to the color in the object but I can't figure out how to pass that value to Sass/css.

// array I'm mapping
// fixed unescaped js comment
const array = [
   {
    title: 'this is object one\'s the title',
    color: #979696
  },
   {
    title:'this is object two\'s title',
    color: #8C64E6
  }
]
// component formatting array values

const card = props => (
  <h3 className='title'>{props.title}</h3>
)
// css
.title {
  color: ????
}

Answer 1

There is no way to pass that to your sass if you are not using some kind of css in js solution like styled components

However in this case you could do something like:

const card = props => (
  <h3 
    className='title'
    style={{ color: props.color }}
  >
    {props.title}</h3>
)

Answer 2

You can write inline CSS in JSX. Assuming you are passing styles as props in an object named styleObject , you can add the color property as follows:

const Card = props => {
    const color = props.styleObject.color
    const title = props.styleObject.color
    return (
        <h3 style={{ color: color }}>{title}</h3>
    )
}

Additionally if you want to render a heading for each object in your array you can do it as follows:

const Cards = props => {
    const array = props.array
    return array.map(heading => (
        <h3 key={heading.title} color={heading.color}>
            {title}
        </h3>
    ))
}

Answer 3

I am not sure if I get your question correctly, but you can use inline style directly

const array = [
   {
    title: 'this is object one's the title',
    color: #979696
  },
   {
    title:'this is object two's title',
    color: #8C64E6
  }
]
// component formatting array values

const card = props => (
  <h3 style={{color:a.color}}>{props.title}</h3>
)