Можно ли использовать for в render

102

29 июля 2019, 17:20

Хочу пройтись и данным и вывести все элементы. Но жалуется на Data.paperId.length; i++ в чемс проблема?

  render() {
    const Data = this.state.Data;
    if (!Data) return <div>Loading</div>;
    let count = Data.paperId.length;
    console.log(count);
    return (
      <div className="container">
        <div className="list_papers">
          <h1>List papers</h1>
          {/* <div>{JSON.stringify(Data)}</div>; */}
          for (let i = 0; i < Data.paperId.length; i++) {
            <p>First Name: {Data.paperId[i].first_name}</p>
            <p>Last Name: {Data.paperId[i].last_name}</p>
            <p>Email: {Data.paperId[i].paper_email}</p>
            <p>Passworld: {Data.paperId[i].paper_parole}</p>
            <p>Position: {Data.paperId[i].paper_position}</p>
            <p>About: {Data.paperId[i].paper_about}</p>
            <p>Researc: {Data.paperId[i].paper_research}</p>  
          }
        </div>
        <div className="profile">
          <h1>Profile paper</h1>
        </div>
      </div>
    );
  }
}

Answer 1

В React.js все данные можно вывести с помощью функции map

Вот пример на codesandbox: ссылка

Пример по Вашему коду:

  render() {
    const { Data } = this.state;
    if (!Data) return <div>Loading</div>;
    console.log(count);
    return (
      <div className="container">
        <div className="list_papers">
          <h1>List papers</h1>
          {Data.map((item, index) => (
             <div key={index}>
               <p>First Name: {item.first_name}</p>
               <p>First Name: {item.last_name}</p>
               /* и т.д. */
             </div>
           ));
          }
        </div>
        <div className="profile">
          <h1>Profile paper</h1>
        </div>
      </div>
    );
  }
}

Подробнее о выводе данных в React.js Вы можете прочитать в документации.