How can I prevent a component from displaying before loading data?

Question

I expect the props to appear from the repository named GetDealersStore , and the way I get the data with the action in which I do this:

  componentWillMount () { GetDealersActions.getDealers(); } 

I have already tested the application, and componentWillMount() works until the initial rendering, where I have this

 let dealerInfo; if (this.state.dealerData) { dealerInfo = this.state.dealerData.dealersData.map((dealer) => { return (<div>CONTENT</div>); }) } else { dealerInfo = <p>Loading . . .</p> } 

but for the first second you can see <p>Loading . . .</p> <p>Loading . . .</p> <p>Loading . . .</p> on the screen, which is else in the conditional expression above, and then return (<div>CONTENT</div>); appears in the rest of the rendering return (<div>CONTENT</div>); , which is if in conditional, So I think it means the render method was a trigger because it continues to wait for data coming from the database.

Data from the database is not available during the 1st rendering, so how can I get this data before the first initial rendering?

Answer 1

You cannot do this with a single component. You must follow the Container Component pattern to separate data from rendering.

 let DealersContainer = React.createClass({ getInitialState() { return {dealersData: []}; }, componentWillMount() { GetDealersActions.getDealers(); }, render() { let {dealersData} = this.state; return (<div> {dealersData.map((dealer) => { let props = dealer; return (<Dealer ...props />); // pass in dealerData as PROPS here })} </div>); } }); 

Then update your Dealer component to get the details and display the actual content.

Answer 2

My answer is similar to Mathletics', in more detail.

In this example, I turned on initialization of the state of dealerData to null; This is a check made to determine if data was returned from storage by the container.

It is verbose, but declarative and does what you want in the order you want, and it will work every time.

 const DealerStore = MyDataPersistenceLibrary.createStore({ getInitialState() { return { dealerData: null }; }, getDealers() { // some action that sets the dealerData to an array } }); const DealerInfoContainer = React.createClass({ componentWillMount() { DealerStoreActions.getDealers(); }, _renderDealerInfo() { return ( <DealerInfo {...this.state} /> ); }, _renderLoader() { return ( <p>Loading...</p> ); }, render() { const { dealerData } = this.state; return ( dealerData ? this._renderDealerInfo() : this._renderLoader() ); } }); const DealerInfo = React.createClass({ getDefaultProps() { return { dealerData: [] }; }, _renderDealers() { const { dealerData } = this.props; return dealerData.map(({ name }, index) => <div key={index}>{name}</div>); }, _renderNoneFound() { return ( <p>No results to show!</p> ); }, render() { const { dealerData } = this.props; return ( dealerData.length ? this._renderDealers() : this._renderNoneFound() ); } });