0

How can I get line breaks to work when using template literals in a prop?

const TypographyGroup = ({label, content}) => (
  <div>
    <FadedLabel type='subheading'>
      {label}
    </FadedLabel>
    <Typography type='body1'>
      {content}
    </Typography>
  </div>
)

<TypographyGroup
  label='Address'
  content={`${profile.company.billingAddress.street_1}
    ${profile.company.billingAddress.street_2}
    ${profile.company.billingAddress.city}, ${profile.company.billingAddress.state} ${profile.company.billingAddress.zip}`}
/>

Here I'm hoping to have a line break after street_1 and street_2, but am getting no line breaks at all.

mikeriley131
  • 353
  • 6
  • 15
  • 2
    You might be rendering `content` directly inside ``. Might be better to pass content = {profile.company.billingAddress} as prop and add `
    ` in the render method of ``     – anand Oct 27 '17 at 05:42

1 Answers1

2

You might be rendering content directly inside <TypographyGroup>. Might be better to pass content = {profile.company.billingAddress} as prop and add <br/> in the render method of <TypographyGroup>

Update So this might be what you want

const TypographyGroup = ({label, content}) => (
  <div>
    <FadedLabel type='subheading'>
      {label}
    </FadedLabel>
    <Typography type='body1'>
      {content.street_1}<br/>
      {content.street_1}<br/>
      {content.city} {content.state} {content.zip}
    </Typography>
  </div>
)

<TypographyGroup
  label='Address'
  content={profile.company.billingAddress}
/>
anand
  • 565
  • 2
  • 9
  • Updated so you can see how `content` is being rendered. – mikeriley131 Oct 27 '17 at 05:59
  • Thanks for the update. I should have been more clear. `TypographyGroup` gets used for other data keys than just this address one. Is my only option to create a separate `TypograpghyGroup` for just address? – mikeriley131 Oct 27 '17 at 06:14
  • Does TypograpghyGroup group can get another component as it's content, or just text? – Ori Drori Oct 27 '17 at 06:15
  • If you mean receiving props, yes, it is possible to pass components as props. But it might be better practice to pass data in as props from a parent and do the rendering inside the child component. – anand Oct 27 '17 at 06:21
  • 1
    I went with creating a separate component for just the address. Thanks for your help. – mikeriley131 Oct 27 '17 at 06:24