Как добавить новую строку, когда я возвращаю массив в React?

Оберните строку в <div>, а затем поместите ее в массив.

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

Другой способ — использовать map() и оператор расширения для сокращения кода.

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

Вы можете обернуть dummy data тегом div, прежде чем помещать его в массив следующим образом.

<div>dummy data</div>

Вы можете изменить свой код на

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>
    );
  }
}

Это очень просто. Используйте map для итерации массива, а затем верните его, завернутый в

ярлык.

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>
    );
  }
}