title: How can I dynamically set style of a mapped element without using inline styling?
body: <p>I'm coding a React function with parent component containing an array of objects:</p>
  <pre><code>let const ingredients = [
      {name:&quot;lettuce&quot;,color:&quot;green&quot;},
      {name:&quot;tomato&quot;,color:&quot;red&quot;}
  ]
  </code></pre>
  <p>...</p>
  <p>In a child component, there is a map function that breaks down an array to single items to be displayed in a div.</p>
  <p>What is the best practice for defining CSS styling for an object <code>className:&quot;name&quot;</code> to set <code>backgroundColor: {ingredient.color};</code>? I'm trying to avoid manual entry of the entire set of key/values of 'ingredients', to allow updating the object without breaking the code.</p>
  <p>I'm currently using inline styling, which I have been advised against. Currently using:</p>
  <pre><code>let burg = props.toppings.map((item) =&gt; {
  const divColor = {backgroundColor: item.color};
  return (&lt;div style={divColor}&gt;{item.name}&lt;/div&gt;)
  </code></pre>