CODEWITHSUNDEEP
reactjs
user3378165
user3378165

Reputation: 6916

Add a <LineBreak /> component within block code

I have this small component that renders attachments' names. I would want to add a line break between each attachment name, I have a <LineBreak /> component but I'm not sure what's the right syntax to add the component here.

I tried:

return file.name + <LineBreak />

and:

return file.name + (<LineBreak />)

But they both didn't work. 

export default function AttachedFile({ attachments }) {
  return (
    <div>
      <NavLink to="./" css={text}>
        {Array.from(attachments).map(file => {
          return file.name; // How do I add the <LineBreak /> component here?;
        })}
      </NavLink>
    </div>
  );
}

Upvotes: 0

Views: 79

Answers (2)

Sulthan
Sulthan

Reputation: 130122

Possibly the simplest solution would be to use a fragment:

   <NavLink to="./" css={text}>
    {Array.from(attachments).map((file, index) => (
      <React.Fragment key={index}>
        {file.name}<LineBreak />
      </React.Fragment>
    ))}
  </NavLink>

Note that you should have a key in the iteration anyway.

Upvotes: 1

Oli
Oli

Reputation: 872

export default function AttachedFile({ attachments }) {
  return (
    <div>
      <NavLink to="./" css={text}>
        {Array.from(attachments).map(({ name }, index) => (
          <React.Fragment key={index}>
            {name}
            <LineBreak />
          </React.Fragment>
        ))}
      </NavLink>
    </div>
  );
}

Here the .map is returning a React.Fragment which contains two elements, first is the name of the file, second is the <LineBreak> component.

Upvotes: 1

Related Questions