title: How to change a background color based on a variable?
body: <p>So I'm calling PokeAPI to create a Pokedex, and I want to make it so when the first type of the pokemon is &quot;grass&quot;, for example, the background is green, when it's &quot;fire&quot;, the background is red, etc.</p>
  <p>I've declared it as green initially, because the first 3 Pokémons (Bulbasaur, Ivysaur and Venusaur) are grass type, and I was able to create a condition to change it to red when the type is fire. I don't know though how to create more conditions inside the same style for the same parameter (background).</p>
  <p>As of now, this part of the code looks like this and it's working perfectly: ( is a component from styled-components)</p>
  <pre><code>&lt;Background style = {{background: typea === &quot;fire&quot; ? &quot;#ff726f&quot; : &quot;&quot;}}&gt;
  </code></pre>
  <p>I just want to add more conditions like:</p>
  <pre><code>if typea === &quot;fire&quot; ? &quot;red&quot;: &quot;&quot;
  if typea === &quot;bug&quot; ? &quot;yellow&quot; : &quot;&quot;
  if typea === &quot;poison&quot; ? &quot;purple&quot; : &quot;&quot;
  </code></pre>
  <p>etc.</p>
  <p>All the ways I've tried to declare that have resulted in an error.</p>