CODEWITHSUNDEEP
reactjs
bp123
bp123

Reputation: 3417

Add a line break javascript

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}`}
/>

Upvotes: 2

Views: 128

Answers (3)

iambinodstha
iambinodstha

Reputation: 1007

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.

Upvotes: 2

Cerberus
Cerberus

Reputation: 10218

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...;
  )
}

Upvotes: 1

Miroslav Glamuzina
Miroslav Glamuzina

Reputation: 4557

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>

Upvotes: 1

Related Questions