I am currently collaborating on a group project that involves developing a website. One of my team members created a ContentBlock component to facilitate the creation of new pages (see component code below). I have been working on a new page for the site and attempting to pass a string with newline characters to the component, but they are not displaying correctly.
export const ContentBlock = ({ title, content }: { title: string, content: string }) => {
return (
<div style={{ width: '100%', paddingTop: '20px', paddingRight: '10px'}}>
{/* Block Header */}
<h2 style={{
borderBottom: '4px solid #A1DAFD',
borderTop: '4px solid #A1DAFD',
textAlign: 'left',
padding: '10px ', color: '#4434A6', fontSize: '40px', fontFamily: 'Sanchez', fontWeight: 'bold' }}> {title} </h2>
{/* Block Content */}
<p style= {{color: '#4434A6', fontSize: '24px', fontFamily: 'League Spartan', paddingTop: '15px'}}> {content} </p>
</div>
);
}
I have attempted to use the newline character within the string passed to the component as well as trying the
tag, but both methods only display the characters without creating new lines.
<div style={{display: 'flex', flexDirection: 'column', alignSelf: 'stretch'}}>
<ContentBlock title="Sample Title"
content="Sample Content 1\n
Sample Content 2\n
Sample Content 3\n
Sample Content 4"></ContentBlock>
<ContentBlock title="Second Content Block" content="Example"></ContentBlock>
</div>