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>
)