反応成分の2つの要素を繰り返す方法

Question

私は意味論的UIを使用しており、アコーディオン成分を構築する必要があります。これは私が思いついたものですが、.titleと.contentの使用法が間違っているため、これは機能しません。 これはどのように正しく行われるべきですか？

import React, { Component } from 'react'; 

export default class Example extends Component { 
    getData() { 
     // some data 
    } 

    render() { 
     return (
      <div className="ui styled fluid accordion"> 
       { 
        this.getData().map((element) => { 
         return (
          <div className="title"> 
           <i className="dropdown icon"></i> 
           { element.title } 
          </div> 
          <div className="content"> 
           <ul className="ui list"> 
            <li>Lorem ipsum</li> 
           </ul> 
          </div> 
         ); 
        }) 
       } 
      </div> 
     ); 
    } 
} 

更新

結果は、あなたが関数からのみコンポーネントを返すことができ

​​

Answer 1

ようにする必要があります。

地図は間違った選択です。

// build the array of all elements 
const accordionChildren = []; 
this.getData().forEach(element => { 
    accordionChildren.push(
    <div className="title">{element.title}</div>, 
    <div className="content">{element.content}</div> 
); 
}); 

return (
    <div className="ui styled fluid accordion"> 
    {accordionChildren} 
    </div> 
); 

Answer 2

それは、コードのどの部分で二つの成分を返すために無効な構文です：あなた機能をレンダリングでこれを試してみてください。問題は、このスニペットです：

... 

return (
    <div className="title"> 
     <i className="dropdown icon"></i> 
     { element.title } 
    </div> 
    <div className="content"> 
     <ul className="ui list"> 
      <li>Lorem ipsum</li> 
     </ul> 
    </div> 
); 

... 

しかし、あなたがそれらは、配列を返すことで隣同士にレンダリングするために得ることができる必要があります：

... 

return (
    [(<div className="title"> 
     <i className="dropdown icon"></i> 
     { element.title } 
    </div>), 
    (<div className="content"> 
     <ul className="ui list"> 
      <li>Lorem ipsum</li> 
     </ul> 
    </div>)] 
); 

...