title: Different Background Color For a React Component that Renders an array of Numbers
body: <p>I was to generate different background colors in a React component that returns an array of numbers from 1 to 100.</p>
  <p>The even numbers should have a separate color as well as Odd and Prime numbers.</p>
  <p>Presently, I have my Random Component rending inside the App component.</p>
  <p>My problem now is how to generate those colors for even, odd and prime numbers.</p>
  <p>What I have done so far is down below.</p>
  <p><strong>App Component</strong></p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  import Numbers from './Numbers'
  import './Style.css'
  
  export default function App() {
      // const numbers = [1]
  
  const numbers = [];
  for(let i=0; i&lt;=31; i++){
      numbers.push(i);
      if(i % 2 === 0){
          // numbers.style.backgroundColor = 'green' ; 
      }
     }
      return (
        &lt;div className='container'&gt;
          &lt;div className=&quot;child&quot;&gt;
            &lt;h1&gt;Numbers List&lt;/h1&gt;
            &lt;ul&gt;
              &lt;Numbers className=&quot;block&quot; numbers={numbers} /&gt;
              {/* &lt;Numbers/&gt; */}
            &lt;/ul&gt;
          &lt;/div&gt;
          
        &lt;/div&gt;
      )
  }
  
  </code></pre>
  <p><strong>Number Component</strong></p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react'
  
  export default function Numbers({ numbers }) {
    const list = numbers.map((number) =&gt; 
    &lt;div key={number} className=&quot;numbers&quot;&gt;&lt;li  className=&quot;list&quot;&gt;{number}&lt;/li&gt;&lt;/div&gt;
    )
    return list
  }
  </code></pre>
  <p><strong>Style sheet</strong></p>
  <pre class="lang-css prettyprint-override"><code>body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
  } 
  .container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
  } 
  .numbers{
    background-color: pink;
    width: 100px;
    height: 100px;
    border-right: 1px solid gray;
    border-bottom: 1px solid aliceblue;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  li{
    text-align: center;
    padding-top: 15px;
    font-size: 1.2rem;
    padding-left: 15px;
  }
  </code></pre>