Clash Royale CLAN TAG#URR8PPP

How to populate Ant Design List of Cards with Firebase backend

PROPS: There is an array of ids coming from props.

[ '61248A6Ad6dd05AD1FA','5AC1f5afF46a0c40Bf4', 'etc...' ]


FIREBASE: There is the Firebase backend where each of those ids has same attributes.

ANT DESIGN: There is the default layout for lists of cards.

<List
dataSource=this.renderBooks()
renderItem=item => (
<List.Item>
<Card title=item.title>Book content</Card>
</List.Item>
)
/>


I am trying to loop through the array and fetch the relevant data for each id.

Then populate my list in render()

class BooksView extends Component
state =
title: ''


renderBooks()
const books= this.props.ids.map(book =>
return firebase.database().ref(`/ids/$book`).on('value', s => s.val())
);
Promise.all(books)
.then(item =>
this.setState(title:item);
);


render()
return (
<div>
<List
dataSource=this.renderBooks()
renderItem=item => (
<List.Item>
<Card title=item.title>Book content</Card>
</List.Item>
) />
</div>
);



export default BooksView;


Using state inside render gives me infinite loops.

Other tries gave me undefined values because of async nature of Firebase.

state

How one can correctly populate the list using promises and array-object conversion?

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.