adding new lines in react jsx element array values

Question

trying to add new line when display values in react.
Can somebody tell me what am I missing?
here is my code

const qList = qs.map(
    (question, idx) => (<div key={idx}>{idx>0?<hr />:<span />}{idx+1 + '. ' + 
    question.split('\n').map((item) => {return (item);})}</div>)
  );

  return (
    <div style={{ width: '100%' }}>
      { qList }
    </div>
  );

question data:
this is line first line.\nThe second\n and this is third

expected result:
this is line first line.
The second
and this is third

What I get:
this is line first line.,The second, and this is third

reference

UPDATED ANSWER:

const qList = qs.map((question, idx) => (
        <div key={idx}>
          {idx>0?<hr />:<span />}
          {<span>
            {idx+1 + '. '}
          </span>}
          {
            question.split('\n').map(item =>(
              <span>
                {item}
                <br />
              </span>
            ))
          }
        </div>
      ));

return (
    <div style={{ width: '100%' }}>
      { qList }
    </div>
  );

Ronn Wilder · Accepted Answer · 2018-06-06 08:29:54Z

1

class Application extends React.Component {
render() {
  let qlist = ["this is line first line.\nThe second\n and this is third"];
  return (
    <div style={{ width: '100%' }}>
      { 
        qlist.map((qs, idx) => (
          <div key={idx}>
            {
              qs.split("\n").map(item => (
                <span>
                  {item}
                  <br/>
                </span>
              ))
            }
          </div>
         ))
      }
    </div>
  );
}
}

answered Jun 6, 2018 at 8:29

Ronn Wilder

1,37810 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vishal · Accepted Answer · 2018-06-06 08:39:20Z

0

HTML does not understand \n. Use <br /> instead.

This should help:

question.split('\n').map((item) => {return <span> {item} + <br /></span>;})}</div>)

edited Jun 6, 2018 at 8:39

answered Jun 6, 2018 at 8:15

Vishal

11k22 gold badges90 silver badges136 bronze badges

2 Comments

mmk Over a year ago

I tried that also, but no luck.can you update with a code example?

mmk Over a year ago

thanks for the help. but it's not working. giving <br /> instead of new line

Collectives™ on Stack Overflow

adding new lines in react jsx element array values

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related