title: How to render Array data in Row of react-table
body: <p>I'm new in React. Using react-table component to render data from firebase and that is working well.</p>
  
  <pre><code>constructor(props) {
      super(props);
      this.state = {
        vehicles: []
      };
    }
  getvehicles() {
          let vehicles = [];
          firebase
            .database()
            .ref(`vehicles`)
            .once('value', snapshot =&gt; {
              snapshot.forEach(level1 =&gt; {
                level1.forEach(level2 =&gt; {
                  const vehicle = level2.val();
                  vehicle.pictures &amp;&amp; vehicles.push(vehicle);
                });
              });
              this.setState({
                vehicles
              });
            });
        }
  </code></pre>
  
  <p>From here Data comming in react-table</p>
  
  <pre><code>return (
    &lt;div style={style}&gt;
      &lt;div&gt;
        &lt;ReactTable
          style={{ marginLeft: '-80%', marginRight: '-80%' }}
          data={this.state.vehicles}
          filterable
          defaultFilterMethod={(filter, row) =&gt;
            String(row[filter.id]) === filter.value
          }
          columns={vehiclesColumns}
          SubComponent={row =&gt; {
            return ;
          }}
        /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>Problem is, that I'm getting "pictures" from database, and want to put them in "subcomponent" and I do not know how? Anyone to help?</p>
  
  <pre><code>SubComponent={row =&gt; {
            return (
              &lt;div&gt;
                some code here
              &lt;/div&gt;
            );
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/7LlRy.png" rel="nofollow noreferrer">Image 1 Example of data loaded from firebase</a></p>
  
  <p><a href="https://i.stack.imgur.com/1q0yS.png" rel="nofollow noreferrer">Image 2 Example of table "click on arrow and show pics from database"</a></p>
  
  <p>=====================</p>
  
  <h1>New question</h1>
  
  <p>Ok on the end I manage to make all together but still getting error 'imageUrls' is not defined.</p>
  
  <p>For me this is nightmare to find where is problem, so is there anyone who can re-check this code totally and just make comment how to fix and where is problem?!</p>
  
  <pre><code>    import React, { Component } from 'react';
  import ReactTable from 'react-table';
  import 'react-table/react-table.css';
  import firebase from 'firebase';
  import Moment from 'moment';
  import { storage } from 'firebase';
  import _ from 'underscore';
  
  export const getFileByPath = async query =&gt;
    await storage
      .ref()
      .child(query)
      .getDownloadURL();
  
  class App extends Component {
    constructor(props) {
      super(props);
      this.state = {
        vehicles: []
      };
      this.state = {
        imageUrls: []
      };
    }
    prepareImages = () =&gt; {
      Promise.all(
        _.map(this.props.images, image =&gt; {
          return storage.getFileByPath(image.remoteUri);
        })
      ).then(results =&gt;
        _.each(results, result =&gt; {
          const imageUrls = this.state.imageUrls;
          imageUrls.push(result);
          this.setState({ imageUrls: imageUrls, loading: false });
        })
      );
    };
    componentWillMount() {
      this.getvehicles();
    }
  
    getvehicles() {
      let vehicles = [];
  
      firebase
        .database()
        .ref(`vehicles`)
        .once('value', snapshot =&gt; {
          snapshot.forEach(level1 =&gt; {
            level1.forEach(level2 =&gt; {
              const vehicle = level2.val();
              vehicle.pictures &amp;&amp; vehicles.push(vehicle);
            });
          });
          this.setState({
            vehicles
          });
        });
    }
  
    render() {
      const vehiclesColumns = [
        {
          columns: [
            {
              Header: 'Vehicle ID',
              id: 'vehicleID',
              accessor: d =&gt; d.vehicleID,
              filterMethod: (filter, row) =&gt;
                row[filter.id].startsWith(filter.value)
            },
            {
              Header: 'Terminal',
              id: 'terminal',
              accessor: d =&gt; d.terminal,
              filterMethod: (filter, row) =&gt;
                row[filter.id].startsWith(filter.value)
            },
            {
              Header: 'Time',
              id: 'timestamp',
              accessor: d =&gt; {
                return Moment(d.timestamp)
                  .local()
                  .format('DD-MMMM-YYYY', 'at', true);
              },
              filterMethod: (filter, row) =&gt;
                row[filter.id].startsWith(filter.value)
            },
            {
              Header: 'User',
              id: 'user',
              accessor: d =&gt; d.user,
              filterMethod: (filter, row) =&gt;
                row[filter.id].startsWith(filter.value)
            }
          ]
        }
      ];
  
      return (
        &lt;div style={style}&gt;
          &lt;div&gt;
            &lt;ReactTable
              style={{ marginLeft: '-80%', marginRight: '-80%' }}
              data={this.state.vehicles}
              filterable
              defaultFilterMethod={(filter, row) =&gt;
                String(row[filter.id]) === filter.value
              }
              columns={vehiclesColumns}
              SubComponent={row =&gt; {
                return (
                  &lt;div&gt;
                    {_.map(imageUrls, image =&gt; (
                      &lt;img src={image} key={image} /&gt;
                    ))}
                  &lt;/div&gt;
                );
              }}
            /&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const style = {
    display: 'flex',
    justifyContent: 'center'
  };
  
  export default App;
  </code></pre>