title: How to pass the function result according to the parameter to props
body: <p>My program has a page that repeat the component called CanvasCard 9 times.
  That your structure</p>
  
  <pre><code>                      &lt;Row className='card-columns'&gt;
                        &lt;CanvasCard title='Parceiros Chave' cardID='1' color='blue-violet'
                          description={this.state.description}
                          list={this.state.list}
                        /&gt;                      
                        &lt;Row style={{ margin: '0px' }}&gt;
                          &lt;CanvasCard title='Atividades Chave' cardID='2' class='card-height' color='green'
                            description={this.state.description}
                            list={this.state.list}
                          /&gt;
                          &lt;CanvasCard title='Recursos Chave' cardID='3' class='card-height' color='orange'
                            description={this.state.description}
                            list={this.state.list}
                          /&gt;
                        &lt;/Row&gt; ....
  </code></pre>
  
  <p><code>this.state.list</code> contains an array with all cards data, for example:</p>
  
  <pre><code>   {_id: "5d78d065ad06c71d4714156c", name: "Canvas", __v: 0, cards: Array(11), createdAt: "2019-09-11T10:45:57.984Z"}
      cards: Array(11)
      0: {description: "parceiro 01", cardID: "1", _id: "5d7a209fad06c71d47141596", createdAt: "2019-09-12T10:40:31.323Z"}
  1: {description: "parceiro 02", cardID: "1", _id: "5d7a3e61ad06c71d4714159e", createdAt: "2019-09-12T12:47:29.532Z"}
  2: {description: "parc3", cardID: "1", _id: "5d7a4bcb3b441c223ac74e01", createdAt: "2019-09-12T13:44:43.548Z"}
  3: {description: "atividade 00", cardID: "2", _id: "5d7a790a3b441c223ac74e04", createdAt: "2019-09-12T16:57:46.924Z"}
  4: {description: "recurso 01", cardID: "3", _id: "5d7a795f3b441c223ac74e05", createdAt: "2019-09-12T16:59:11.026Z"}
  5: {description: "Proposta 01", cardID: "4", _id: "5d7a797b3b441c223ac74e06", createdAt: "2019-09-12T16:59:39.202Z"}
  6: {description: "Relação 01", cardID: "5", _id: "5d7a79b03b441c223ac74e08", createdAt: "2019-09-12T17:00:32.417Z"}
  7: {description: "Canais 01", cardID: "6", _id: "5d7a79b63b441c223ac74e09", createdAt: "2019-09-12T17:00:38.256Z"}
  8: {description: "Canais 02", cardID: "6", _id: "5d7a79b93b441c223ac74e0a", createdAt: "2019-09-12T17:00:41.080Z"}
  9: {description: "Segmentos 01", cardID: "7", _id: "5d7a79bc3b441c223ac74e0b", createdAt: "2019-09-12T17:00:44.672Z"}
  10: {description: "Esttrutura de Custos 01", cardID: "8", _id: "5d7a79c33b441c223ac74e0c", createdAt: "2019-09-12T17:00:51.152Z"}
  11: {description: "Fontes de Renda 01", cardID: "9", _id: "5d7a79c73b441c223ac74e0d", createdAt: "2019-09-12T17:00:55.945Z"}
  </code></pre>
  
  <p>I'm calling this array 9 times (one per CanvasCard component).</p>
  
  <p>The canvasCard component receive this array and check which are the objects with your respective ID.
  For example, the first canvasCard of the example is this:</p>
  
  <pre><code> &lt;CanvasCard title='Parceiros Chave' cardID='1' color='blue-violet'
                              description={this.state.description}
                              list={this.state.list}
                            /&gt;                      
  </code></pre>
  
  <p>This canvasCard contains the <code>cardID=1</code>, so your data according to the <code>this.state.list</code> array is those:</p>
  
  <pre><code>0: {description: "parceiro 01", cardID: "1"}
  1: {description: "parceiro 02", cardID: "1"}
  2: {description: "parc3", cardID: "1"}
  </code></pre>
  
  <p>Instead of pass all the array using <code>this.state.list</code> in each CanvasCard component, how can I pass only an array with their respective objects (according to the cardID)?</p>
  
  <p>I tried do something like this, but it does not works:</p>
  
  <pre><code>                       canvasCardData = id =&gt; {        
                           return this.state.list[0].cards.filter(x =&gt; x.cardID == id)    
                         }
  
                         &lt;CanvasCard title='Parceiros Chave' cardID='1' color='blue-violet'
                          description={this.state.description}
                          list={() =&gt; canvasCardData(1)}
                        /&gt;                                               
                         &lt;CanvasCard title='Atividades Chave' cardID='2' class='card-height' color='green'
                           description={this.state.description}
                           list={() =&gt; canvasCardData(2)}
                         /&gt;
                         &lt;CanvasCard title='Recursos Chave' cardID='3' class='card-height' color='orange'
                           description={this.state.description}
                           list={() =&gt; canvasCardData(3)}
                         /&gt;
  </code></pre>