I am experiencing an issue with my React application. I have created an App component that is supposed to render an array of components on the screen, but for some reason, the inline CSS styles are not displaying.
//App component
import data from "./data.js"
import Item from "./Item"
export default function App(){
const cardElements = data.map(item => <Item/>)
return (<div className='app'>
{cardElements}
</div>);
}
//Item component
export default function Item(){
const customStyle = {border: "2px solid black"};
return (<div style={customStyle} >Item component</div>);
}
Despite setting inline CSS in the Item component, the styles do not seem to be applied correctly when the webpage is loaded.