title: How to dynamically change the style of a single item of a mapped array in React
body: <p>I am trying to change the background of a baseLayer when it is clicked. The code beneath makes all the baseLayers blue when the button is clicked, but I only want the clicked item to be blue.</p>
  
  <pre><code>import React, { useState } from 'react'
  import uuid from 'uuid/v1'
  
  const BaseLayers = (props) =&gt; {
  let tacos = props.tacos;
  const [background, setBackground] = useState({ isSelected: false, item: '' });
  return (
      &lt;div className='base-layers'&gt;
      &lt;div className="base-layers-info" &gt;START BY CHOOSING A BASE LAYER&lt;/div&gt;
          { Array.isArray(tacos.base_layers) &amp;&amp; tacos.base_layers.map(item =&gt; {
              return  &lt;div className="base-layer" key={uuid()} id={item.title} **style={{ backgroundColor: background.isSelected ? 'blue' : 'red' }} &gt;**
                          &lt;h4 className="base-layer-title"&gt;{ item.title }&lt;/h4&gt;
                          &lt;img src={require('../img/taco-cards.jpg')} alt="taco" /&gt;
                          &lt;div className="base-layer-ingredients-container"&gt;
                          { item.ingredients.map(item =&gt; {
                              if(typeof item === 'string'){
                                  return   &lt;h6 className="base-layer-ingredients" key={uuid()}&gt;{ item }&lt;/h6&gt;
                              }
                              if(typeof item === 'object'){
                                  return  &lt;h6 className="base-layer-ingredients" key={uuid()}&gt;{ item.title }&lt;/h6&gt;
                                  return  &lt;h6 className="base-layer-ingredients" key={uuid()}&gt;{ item.ingredients }&lt;/h6&gt;
                              }
                          }) }
                          &lt;/div&gt;
                          &lt;button className="base-layer-button" onClick={(e) =&gt; {
                              props.setBaseLayer(e.target.parentElement.id);
                              **setBackground({ isSelected: !background.isSelected, item: e.target.parentElement.id });**
                          }} &gt;
                              Choose this base layer
                          &lt;/button&gt;
                          &lt;div className="base-layer-tags-container"&gt;
                          { item.tags.map(item =&gt; {
                              return   &lt;h6 className="base-layer-tags" key={uuid()}&gt;{ item }&lt;/h6&gt;
                          }) }
                          &lt;/div&gt;
                      &lt;/div&gt;
          }) }
      &lt;/div&gt;
  );
  }
  
  export default BaseLayers;
  </code></pre>