The text I want to get rendered is rendered, but css is not applied. The css works perfectly when used on a item that is not mapped. On the app render method, the css gets applied, but on the message rendered, the CSS does not get applied for some reason.
I suspect that this is because of some technical issues to do with the list
const boyDivStyle = {
backgroundColor: "blue",
borderRadius: "25px",
padding: "20px",
width: 1*20 + "px",
}
class App extends Component {
render() {
return(
<>
<p style = {boyDivStyle}>random</p>
<AddHTMLTag/>
</>
)
}
}
class MessageRenderer extends React.Component {
render() {
return(
<>
{this.state.listOfMessages.map(Message => (
<p style = {boyDivStyle}>
{Message}
</p>
))}
</>
)
}
}
const boyDivStyle = {
backgroundColor: "blue",
borderRadius: "25px",
padding: "20px",
width: 1*20 + "px",
}
class App extends Component {
render() {
return(
<>
<p style = {boyDivStyle}>random</p>
<AddHTMLTag/>
</>
)
}
}
class MessageRenderer extends React.Component {
render() {
return(
<>
{this.state.listOfMessages.map((Message) => {
return (<p style = {boyDivStyle}>{Message}</p>)
}
)}
</>
)
}
}