How to add newline when I return array in React?

Question

I needed to print a string, "dummy data".

So I made a function that returns array which has string "dummy data" in it. I was able to print "dummy data dummy data dummy data ...". However, I want to put newline each string. Then it will looks like,

...
dummy data
dummy data
dummy data
...

How can I do it?

Sample image of code and result

class Content extends Component {
  dummyDataLoop = () => {
    var rows = [];
    for (let i = 0; i < 10; i++) {
      rows.push("dummy data");
    }
    return rows;
  };

  render() {
    return (
      <article>
        <div>[CONTENT AREA START]</div>
        {this.dummyDataLoop()}
        <div>[CONTENT AREA END]</div>
      </article>
    );
  }
}

You need to wrap each line to a block level element or you can use line break — Code Maniac
– Code Maniac, Commented May 22, 2019 at 1:57

Maheer Ali · Accepted Answer · 2019-05-22 01:59:47Z

2

Wrap the string in a <div> and then push it into array.

dummyDataLoop = () => {
  var rows = [];
  for (let i = 0; i < 10; i++) {
    rows.push(<div>dummy data</div>);
  }
  return rows;
};

Another way is to use map() and spread operator to shorten the code.

dummyDataLoop = () => [...Array(10)].map(x => <div>dummy data</div>)

edited May 22, 2019 at 1:59

answered May 22, 2019 at 1:53

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

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

1 Comment

Maheer Ali Over a year ago

@MasonYMKoh Glad to help you. Also see the second of doing the same thing. Actually creating an empty array and pushing elements to it is not considered a clean code.

Code Maniac · Accepted Answer · 2019-05-22 01:53:28Z

0

You can wrap dummy data with div tag before pushing it to array like this

<div>dummy data</div>

You can change your code to,

dummyDataLoop = () => {
    var rows = [];
    for (let i = 0; i < 10; i++) {
      rows.push(<div>dummy data</div>);   // notice change in this line
    }
    return rows;
};

  render() {
    return (
      <article>
        <div>[CONTENT AREA START]</div>
        {this.dummyDataLoop()}
        <div>[CONTENT AREA END]</div>
      </article>
    );
  }
}

answered May 22, 2019 at 1:53

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

Comments

Ken Labso · Accepted Answer · 2019-05-22 04:00:48Z

0

This is much simple. Use map to iterate the array then return it wrapped in a

tag.

class Content extends Component {
  dummyDataLoop = () => {
    var rows = [];
    for (let i = 0; i < 10; i++) {
      rows.push("dummy data");
    }
    return rows;
  };
  render() {
    return (
      <article>
        <div>[CONTENT AREA START]</div>
        {this.dummyDataLoop().map((item, index) => <p key={index}>{item}</p>)}
        <div>[CONTENT AREA END]</div>
      </article>
    );
  }
}

answered May 22, 2019 at 4:00

Ken Labso

9111 gold badge10 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to add newline when I return array in React?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related