在我的 React 应用程序中，如何在此映射函数中的每个项目之后添加换行符？

Question

I have this redux selector I've been working on in my React application. I've made good progress but I've hit a wall with this last issue i'm working on and I feel like it shouldn't be that difficult to solve but I'm struggling.

What I'm trying to achieve is after each item has been mapped, the next item must go to a new line.

export const vLineRejectionSelector = createSelector(
  selectedVIdSelector,
  linesSelector,
  (id, lines) =>
    lines
      .filter(line => line.id === id)
      .map(
        (rejectString, index) =>
          `Line: ${index + 1} ${rejectString.rejectReason}`
      )
);

The only relevant code to look at in this is the map function. I want each item to go to a new line as its being mapped.

The output should look something like:

Line 1: Reject Reason One
Line 2: Reject Reason Two

Instead the output looks like:

Line1: Reject ReasonOneLine2: Reject Reason Two

This is being rendered in JSX as well

The value of this is passed around as a prop and gets rendered in the JSX like:

        <Typography variant="body2">
          {rejectReason}
          {reasons && reasons.join(', ')}
        </Typography>

Its value is {rejectReason}.

Answer 1

I would advise against composing JSX in your selector and rather just return the lines as an array as you are doing currently, but then map it to either a list or a simple <br /> joined list in the render() function. This keeps your selector more easily testable and also doesn't mix state selection concerns with presentational concerns.

Eg: in your container

const mapStateToProps = (state) => {
  return {
    rejectReason: vLineRejectionSelector(state)
  }
}

const SomeComponentContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(SomeComponent)

export default SomeComponentContainer 

and then in your SomeComponent s render function:

<Typography variant="body2">
   {this.props.rejectReason.map((rejectReason) => <>Line: {index + 1} {rejectReason}<br /></>)}
</Typography>

Answer 2

Try to use <br /> tag at the end of each line.

Like Line: ${index + 1} ${rejectString.rejectReason}<br />