データの構造を変換し、REACT、[object Object]でHTMLを渡しますか？

Question

私はアイテムの配列を変換しようとしている...

const data = [ 
    { 
    title: "T1", 
    content: [ 
     { 
     "question": "Q1a", 
     "answer": "A1a" 
     }, 
     { 
     "question": "Q1b", 
     "answer": "A1b" 
     } 
    ] 
}, 
{ 
    title: "T2", 
    content: [ 
     { 
     "question": "Q2a", 
     "answer": "A2a" 
     }, 
     { 
     "question": "Q2b", 
     "answer": "A2b" 
     } 
    ] 
    } 
] 

次のような構造には：

const data2 = [ 
    { 
    header: "T1", 
    body: "<p>Q1a</p><p>A1a</p><p>Q1b</p><p>A1b</p>" 
    },{ 
    header: "etc", 
    body: "etc" 
    } 
] 

ので、私は私のコンポーネント（私は受け入れるアコーディオンと呼ばれるコンポーネントを書いて、それを使用することができます特定のフォーマットでHTMLを含むアイテムのリストです。これはおそらく良い習慣ではありませんが、今は完璧なものにするための時間がありません。私はそれを間違ってやっているし、多くの時間を無駄にしている、実際にはそうだと思われるので、私にそれを指摘してください）

とにかく、私の戦略以下、私は信じている私絶えず私はCONSOLE.LOGたときに、[オブジェクトのオブジェクト]を取得（）のものは、HTMLの連結文字列でなければなりませんが、どうやら私は非常に間違っています。

アイデア？

class App extends Component { 

    createMarkup(content) { 
    return {__html: content}; 
    } 

    getQAMarkup(item) { 
    console.log('getQAMarkup: ', item); 

    return (
     <div className="qa-block"> 
     <p> 
      <strong>{ item.question }</strong> 
     </p> 
     <p dangerouslySetInnerHTML={ this.createMarkup(item.answer) }> 
     </p> 
     </div> 
    ) 
    } 

    render() { 

    //translate data to accordionItems 
    const accordionItems = data.reduce((arr, item) => { 

     let header = item.title; 
     let body = item.content.reduce((str, item) => { 
     str += this.getQAMarkup(item); 

     console.log('str: ', str) // object Object? 
     return str; 
     }, ''); 

     console.log('body: ', body); // object Object? 

     arr.push({ 
     header: header, 
     body: body 
     }); 
     return arr; 
    }, []); 

    console.log(`accordionItems: ${accordionItems[0].body}`); // object Object? 


    return (
     <div className="App"> 
     <div className="App-header"> 
      <img src={logo} className="App-logo" alt="logo" /> 
      <h2>React Collapse Example</h2> 
     </div> 
     <div className="App-body"> 
      {/* <Accordion 
      items={ accordionItems } 
      openedItemKey={ 0 } 
      // onlyOneOpen={ true } 
      /> */} 
     </div> 
     </div> 
    ); 
    } 
} 

ご協力いただきますようお願い申し上げます。煉獄の提案に続き

UPDATE

、私はaccordionItemsと同じことをやった：

const accordionItems = data.map((item) => { 
    return { 
    header: item.title, 
    body: item.content.map((item) => this.getQAMarkup(item)) 
    } 
}); 

私は私のAccordionコンポーネントに続いaccordionItemsを渡されると、それは魅力のように働きました！

しかしconsole.log(accordionItems)を行うとき、私はまだ[object Object]を得ました。何故ですか？このセクション変更した場合は

Answer 1

：代わりにstringとしてgetQAMarkupからの応答を処理するの

let body = item.content.reduce((str, item) => { 
    str += this.getQAMarkup(item); 

    console.log('str: ', str) // object Object? 
    return str; 
}, ''); 

をobjectとして扱い：

let body = item.content.map((item) => this.getQAMarkup(item)); 
//OR 
let body = item.content.map(this.getQAMarkup); 

今bodyは、要素とあなたの配列になりますAccordionコンポーネントでのごloop/map内部{body}として出力、それをすることができるはずです。