How to show pictures from Array to table row in react - reactjs

Question

I already asked this question but got advice to ask again with more details.
I have project to load data from firebase in react-table, and that is done. Working perfectly. Problem is that from that database, there are pictures which need to be showed in table too. From first Picture you can see how data in firebase is organized.
firebase data
And here is code to load that data in react:
class App extends Component {
constructor(props) {
super(props);
this.state = {
vehicles: []
};
}
componentWillMount() {
this.getvehicles();
}
getvehicles() {
let vehicles = [];
firebase
.database()
.ref(`vehicles`)
.once('value', snapshot => {
snapshot.forEach(level1 => {
level1.forEach(level2 => {
const vehicle = level2.val();
vehicle.pictures && vehicles.push(vehicle);
});
});
this.setState({
vehicles
});
});
}
From second picture you can see that data is loaded from firebase
Data loaded from Firebase
And Render code is here:
render() {
const vehiclesColumns = [
{
columns: [
{
Header: 'Vehicle ID',
id: 'vehicleID',
accessor: d => d.vehicleID,
filterMethod: (filter, row) =>
row[filter.id].startsWith(filter.value)
},
{
Header: 'Terminal',
id: 'terminal',
accessor: d => d.terminal,
filterMethod: (filter, row) =>
row[filter.id].startsWith(filter.value)
},
{
Header: 'Time',
id: 'timestamp',
accessor: d => {
return Moment(d.timestamp)
.local()
.format('DD-MMMM-YYYY', 'at', true);
}
},
{
Header: 'User',
id: 'user',
accessor: d => d.user,
filterMethod: (filter, row) =>
row[filter.id].startsWith(filter.value)
}
]
}
];
return (
<div style={style}>
<div>
<ReactTable
style={{ marginLeft: '-80%', marginRight: '-80%' }}
data={this.state.vehicles}
filterable
defaultFilterMethod={(filter, row) =>
String(row[filter.id]) === filter.value
}
columns={vehiclesColumns}
SubComponent={row => {
return <div>PICTURES IN ROW</div>;
}}
/>
</div>
</div>
);
}
}
So my question is, anyone to help me, or rewrite the code, "pictures" array what you can see on second screenshot, render in "row" of "react-table" example:
SubComponent={row => {
return <div><img src={remoteUri} key={vehicle.picture} /></div>;
}}
As you can see on the last screenshot, how sould be and where to show "pictures" from Firebase.
REACT-TABLE DATA WITH PICTURES IN ROW

Answer 1

Already found solution:
Before "render" there is "chain" method to connect all pictures from one vehicle
getvehicles() {
firebase
.database()
.ref(`pictures`)
.once('value', snapshot => {
const data = snapshot.val();
const vehicles = _.chain(data)
.values()
.groupBy('vehicleId')
.map((rows, vehicleId) => ({
vehicleId,
pictures: _.map(rows, 'remoteUri')
}))
.value();
console.log(vehicles);
this.setState({ vehicles });
});
}
At "render"
const storage = firebase.storage();
const storageRef = storage.ref();
<div>
{row.original.pictures.map(ref => (
<Async
promiseFn={() => storageRef.child(ref).getDownloadURL()}
>
{({ isLoading, error, data }) => {
if (error) {
return 'FATALL ERROR';
}
if (isLoading) {
return 'Loading...';
}
if (data) {
return <img src={data} alt={data} key={data} />;
}
}}
</Async>
))}
</div>
With this code Im getting pictures in row of "Subcomponent" in React-table