I'm currently working on a small React project where I'm mapping through an array of data to render its contents on the browser. However, I'm facing an issue regarding styling only certain parts of the rendered data and not all of them. The problem is that each CSS property I apply affects all the paragraph (P) tags uniformly. For instance, in the code snippet below, the styling should only be applied to "Was" in the first item, "Birthday" in the second item, and so on...
Here is my CSS code:
import React from "react";
import "./styles.css";
export default function App() {
const data = [
{
details: 'Yesterday was his birthday'
},
{
details: 'Today is my birthday'
},
{
details: 'I cant\'t remember my birthday date'
}
]
return (
<div className="App">
<h1>I need Help</h1>
<h2>Please How do I style some parts of my rendered details</h2>
{
data.map((detail)=>(
<p>{detail.details}</p>
))
}
</div>
);
}