My task is to create a React component that displays an array of numbers from 1 to 100 with different background colors assigned to even, odd, and prime numbers.
Currently, I have the Random Component rendering inside the App component.
I am struggling with generating the appropriate colors for each type of number.
Below is my progress so far:
App Component
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<=31; i++){
numbers.push(i);
if(i % 2 === 0){
// numbers.style.backgroundColor = 'green' ;
}
}
return (
<div className='container'>
<div className="child">
<h1>Numbers List</h1>
<ul>
<Numbers className="block" numbers={numbers} />
{/* <Numbers/> */}
</ul>
</div>
</div>
)
}
Number Component
import React from 'react'
export default function Numbers({ numbers }) {
const list = numbers.map((number) =>
<div key={number} className="numbers"><li className="list">{number}</li></div>
)
return list
}
Style sheet
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;
}