React JS特定のクリックされたliにコンポーネントを追加

Question

次の関数を作成する方法を理解できません。現在、データ（ローカルjson）をliにロードしています。クリックすると、データ付きのクリックされたli要素に新しいコンポーネントを追加します。

例：別のli前添付要素をクリックすると

<ul> 
    <li> 1 </li> 
    <li> 2 </li> 
    <li> 
     3 
     <div id="data"> 
     <!-- appended data --> 
     </div> 
    </li> 
</ul> 

を除去し、新たliクリックに追加されるべきです。 （行トグル）

もし誰かが正しいリアクション方向に私を蹴ることができたら。

import React, { Component } from 'react'; 
import Flowers from 'flowers.json'; 

class Flowers extends React.Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     isToggleOn: true 
    }; 

    this.onClick = this.handleClick.bind(this); 
    } 


    handleClick = (e) => { 
    console.log(this); 
    console.log(e); 
    console.log('li item clicked! ' + e.currentTarget); 
    // appends to clicked div 
    e.currentTarget.style.backgroundColor = '#ccc'; 
    } 

    render() { 
    const List = Flowers.map((flower) => 
     <li onClick={this.handleClick.bind(this)} key={flower.id} id={flower.id}> 
     {flower.name} 
     </li> 
    ); 

    return(
     <ul>{List}</ul> 
    ); 
    } 
} 

class App extends Component { 
    render() { 
    return (
     <Flowers /> 
    ); 
    } 
} 

export default App; 

Answer 1

あなたの状態にアクティブな花のIDを追加することができます。 など。

this.state = { ActiveFlowerID: null } 

したがって、アクティブなローダーが存在しない場合は、誰も開いていません。 ハンドルのクリック方法で状態を変更し、花のIDと状態に一致するifを使用して花に追加データを描画します。

これが役に立ちます。