クリックするとコンポーネントが挿入され、そのコンポーネント以外のコンポーネントをクリックするとコンポーネントが削除されます

Question

ContentWithFooterはCardです。各Cardにはカード（記事）のフラグを立てたり削除したりするためのメニューがあります。 iconがクリックされたら、そのカードにのみメニュー（<DeleteFlagPost/>）を挿入し、すべてのカードには挿入しません。また、メニューが挿入された後、そのメニュー以外のものがクリックされた場合は、メニューコンポーネントから削除します。それ、どうやったら出来るの？私はこれがどれほど長いのか知っていますが、あなたの助けは本当に私がもっと理解するのを助けるでしょう。ありがとうございました。

ContentWithFooter.js：

class ContentWithFooter extends React.Component { 
    render() { 
     return(
      <div> 
       <Card/> 
       <Card/> 
       <Card/> 
      </div> 
     ); 
    } 
} 

Card.js

class Card extends React.Component { 
    handleDeleteFlag() { 
     return(
      // GET THE CLICKED OBJECT OF THIS CARD AND INSERT <DeleteFlagPost/>??? 
     ); 
    } 
    render() { 
     return(
      <article class="article"> 
      ... 
       <div class="delete-flag-post-btn"> 
        <i class="fa fa-ellipsis-v" aria-hidden="true" onClick={this.handleDeleteFlag}></i> 

        // INSERT THE <DeleteFlagPost/> here when clicked on I element... 

       </div> 
      ... 
      ... 
      </article> 
     ); 
    } 
} 

Answer 1

Keep active card in the contentwithfooter 

class ContentWithFooter extends React.Component { 
    updateMenuForCards(cardNumActive) { 
     this.setState({ 
      cardNumActive 
     }) 
    } 
    render() { 
     return(
      <div> 
       <Card cardNumber= 0 showMenu={cardNumActive === 0} updateMenuForCards={updateMenuForCards}/> 
       <Card cardNumber= 1 showMenu={cardNumActive === 0} updateMenuForCards={updateMenuForCards}/> 
       <Card cardNumber= 2 showMenu={cardNumActive === 0} updateMenuForCards={updateMenuForCards}/> 
      </div> 
     ); 
    } 
} 

    class Card extends React.Component { 
      constructor() { 
       super(props); 
      } 

      handleDeleteFlag() { 
       this.props.updateMenuForCards(this.props.cardNumber) 
      } 
      renderDeleteFlag() { 
       if (this.props.showMenu) { 
        return (<DeleteFlag/>) 
       } 
      } 
      render() { 
       return(
        <article class="article"> 
        ... 
         <div class="delete-flag-post-btn"> 
          <i class="fa fa-ellipsis-v" aria-hidden="true" onClick={this.handleDeleteFlag}></i> 

          {this.renderDeleteFlag()} 

         </div> 
        ... 
        ... 
        </article> 
       );