How do I add a line break into my ModalBodContent react component?
<ModalMain
ModalBodyContent={`New account created. Enrolment email sent. \n\n Name: ${firstName} ${lastName} \n email: ${email}`}
/>
3 Answers
your code perfectly break string line but you need to use CSS style white-space: pre-wrap; in you HTML element where you render that string line.
Comments
2 ways:
You can use dangerouslySetInnerHTML inside of your <ModalMain/>
function render() {
return <div dangerouslySetInnerHTML={{__html: `New account created. Enrolment email sent. \n\n Name: ${firstName} ${lastName} \n email: ${email}`}} />;
}
Or you can pass ModalBodyContent as an element, and render it accordingly:
<ModalMain
ModalBodyContent={
<div>
New account created. Enrolment email sent.
<br/><br/>
Name: {firstName} {lastName}
<br/>
email: {email}
</div>
}
/>
Can also do this:
<ModalMain>
<div>
New account created. Enrolment email sent.
<br/><br/>
Name: {firstName} {lastName}
<br/>
email: {email}
</div>
</ModalMain>
Comments
It depends on what you're expecting to be passed into ModalBodyContent.
If you use this prop as a string, well, there's pretty well nothing you can do. But if you use it as a React.ReactNode, then you can pass there not only a string, but also any JSX, including, for example, React.Fragment:
<ModalMain
ModalBodyContent={(
<React.Fragment>
New account created. Enrolment email sent.
<br/>
<br/>
{`Name: ${firstName} ${lastName}`}
<br/>
{`email: ${email}`}
</React.Fragment>
/>
To use the component this way, internals of ModalMain should be something like this:
render() {
return (
// some complex jsx, possibly...
{this.props.ModalContent}
// anything else...;
)
}
<br>?\n? .ModalMaindocumentation about how they suggest to add new lines.let bcontent = <div>...</div>; ...; <ModalMain ModalBodyContent={bcontent}/>and done.