How To Render Async Data In React + Firestore?

I'm learning react without redux, mobx or any other libraries. The reason why I don't use redux, and so on is that someone told me that it is important to get use to react before u

Solution 1:

You are retrieving data but does not set your state, you don't have any state at all. This is why your component does not re-render after getting data. Maybe one approach could be like this (there could be better ways):

export default class CategoryButtonSet extends React.Component {

    state = {
        categories: [],
    };

componentDidMount() {
    test()
       .then( querySnapshot => querySnapshot.map( doc => doc.id ) )
       .then( data => this.setState( { categories: data } ));
}

render() {
    if(this.state.categories.length) {
        console.log(this.state.categories);
        return (
            <div className="category-block">
                This block is for the category button set.
                {
                    this.state.categories.map(category => <CategoryButton key={category} name={category}/>)
                }
            </div>
        );
    } else {
        return <div>Loading...</div>;
      }
    }  
}

Solution 2:

Pease have a look at Firestorter, if exists exactly for this purpose and you don't need to create a redux store or anything.

https://github.com/IjzerenHein/firestorter