How can I prevent the component from rendering before the data is loaded?

No

I'm waiting for the prop to come out of the store called GetDealersStore, and the way I'm getting the data is by doing:

  componentWillMount () { GetDealersActions.getDealers(); }

I have tested the app and componentWillMount()it runs before the initial render with this feature

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 the above condition <p>Loading . . .</p>on the screen elseand then render the rest of the render return (<div>CONTENT</div>);where the ifcondition is in. So I guess that means the render method has been fired twice because it's been waiting for data from the database.

The data from the database is not available on the first render, so how can I get that data before the first initial render happens?

math

You can't do this with a single component. You should 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 Dealercomponent to receive props and render the actual content.

Related

How can I prevent the component from rendering before the data is loaded?

No I'm waiting for the prop to come out of the store called GetDealersStore, and the way I'm getting the data is by doing: componentWillMount () { GetDealersActions.getDealers(); } I have tested the app and componentWillMount()it runs before the initial ren

How can I prevent the component from rendering before the data is loaded?

No I'm waiting for the prop to come out of the store called GetDealersStore, and the way I'm getting the data is by doing: componentWillMount () { GetDealersActions.getDealers(); } I have tested the app and componentWillMount()it runs before the initial ren

How can I prevent the component from rendering before the data is loaded?

No I'm waiting for the prop to come out of the store called GetDealersStore, and the way I'm getting the data is by doing: componentWillMount () { GetDealersActions.getDealers(); } I have tested the app and componentWillMount()it runs before the initial ren

How can I prevent the "{{}}" handle from appearing in the UI of an "AngularJs Application" before the actual data is loaded?

jackOfAll I have a page whose layout is generated from a GET request that returns an array of length 10000s. So it's hard for me to understand before actually binding to some component's load: {{ binding-model }} This creates a shabby look and feel, and I get

How can I prevent the "{{}}" handle from appearing in the UI of an "AngularJs Application" before the actual data is loaded?

jackOfAll I have a page whose layout is generated from a GET request that returns an array of length 10000s. So it's hard for me to understand before actually binding to some component's load: {{ binding-model }} This creates a shabby look and feel, and I get

How can I prevent the component from re-rendering? (with MWE)

gbewothcc How can I prevent a component from re-rendering without changing its props ? Code sandbox link/minimal working example . Move the cursor over Canvasand you can see that the console logs a number of "Canvas re-rendered"messages. At the top level, I pa

How can I prevent the component from re-rendering? (with MWE)

gbewothcc How can I prevent a component from re-rendering without changing its props ? Code sandbox link/minimal working example . Move the cursor over Canvasand you can see that the console logs a number of "Canvas re-rendered"messages. At the top level, I pa

How can I prevent the entire list from re-rendering when the state of one component changes?

jameson I have a list component that takes data and maps the results on a card-like child component to create a list of "cards". Here is an example: class Card extends Component { constructor(props) { super(props); this.state = { activeTab: 1

How can I prevent the entire list from re-rendering when the state of one component changes?

jameson I have a list component that takes data and maps the results on a card-like child component to create a list of "cards". Here is an example: class Card extends Component { constructor(props) { super(props); this.state = { activeTab: 1

How can I prevent the entire list from re-rendering when the state of one component changes?

jameson I have a list component that takes data and maps the results on a card-like child component to create a list of "cards". Here is an example: class Card extends Component { constructor(props) { super(props); this.state = { activeTab: 1

How can I prevent the state element from being passed to the child component before it is set?

Noiseymur I'm writing a weather forecast app using React. I'm getting the data from the openweathermap.org API. But to use that I need to know the location of the user. So I also use other APIs one by one to identify user IP, location and then weather data acc

How can I clear the loaded data before loading the data into the table?

language I am making a small inventory control system. This is the invoice table of my database. The columns are inid(p), itid(p), cuid(p), itname, qty, sprice, total, isdate, redate. This is the "Invoices" interface when searching for old invoices using the I

How can I clear the loaded data before loading the data into the table?

language I am making a small inventory control system. This is the invoice table of my database. The columns are inid(p), itid(p), cuid(p), itname, qty, sprice, total, isdate, redate. This is the "Invoices" interface when searching for old invoices using the I

Is the array undefined because the component is rendering before the data is loaded?

Charan I have imported a set of objects from a separate js file into my main app.js file. I want to map through an array and pass object values as props to separate components. When I run this code, the students array is returned as undefined. I'm new to React

Is the array undefined because the component is rendering before the data is loaded?

Charan I have imported a set of objects from a separate js file into my main app.js file. I want to map through an array and pass object values as props to separate components. When I run this code, the students array is returned as undefined. I'm new to React

How can I prevent angular from rendering the page until all data is displayed?

username I have the following problem: I am trying to "merge" data from two collections from MongoDB. Everything looks fine until I try to display some data from the second query after the first: $scope.getData = function() { var pipeline, fromDateRangeStatem

How can I prevent angular from rendering the page until all data is displayed?

username I have the following problem: I am trying to "merge" data from two collections from MongoDB. Everything looks fine until I try to display some data from the second query after the first: $scope.getData = function() { var pipeline, fromDateRangeStatem

How can I pass data from the tab bar controller to each tab before the tabs are loaded?

Nila Niranjun I'm sending HTTP requests to a website and is there a rate limit (5 per minute) so I only want to get the data once when the app is open (my tab bar controller) and pass that data to each My Tags. How would I do this. thanks Sandeep Kumar In each

How can I pass data from the tab bar controller to each tab before the tabs are loaded?

Nila Niranjun I'm sending HTTP requests to a website and is there a rate limit (5 per minute) so I only want to get the data once when the app is open (my tab bar controller) and pass that data to each My Tags. How would I do this. thanks Sandeep Kumar In each

How can I get data from the API and then pass it to another component for react when it's fully loaded?

Manmohan Singh I am getting data from pokeApi and passing it to another component. componentDidMount() { fetch("https://pokeapi.co/api/v2/pokemon/") .then(resp => resp.json()) .then(items =>{ //console.log(items.results); items.resu

How can I prevent the menu from showing until it is fully loaded?

username Good evening, is there a way to prevent all elements from showing in a nested side menu after a click or refresh. What I need is to show the element only in the menu or submenu that I click? Website: link . thank you very much. jQuery： if (window.loca

How can I prevent the menu from showing until it is fully loaded?

username Good evening, is there a way to prevent all elements from showing in a nested side menu after a click or refresh. What I need is to show the element only in the menu or submenu that I click? Website: link . thank you very much. jQuery： if (window.loca

Get data from api before rendering component

Alex I send 2 api requests before rendering the page: const Profile = { template: '#profile', attributes: null, photos: [], data: function () { return {attributes: Profile.attributes, photos: Profile.photos}; }, beforeRouteEnter

Get data from api before rendering component

Alex I send 2 api requests before rendering the page: const Profile = { template: '#profile', attributes: null, photos: [], data: function () { return {attributes: Profile.attributes, photos: Profile.photos}; }, beforeRouteEnter

Get data from api before rendering component

Alex I send 2 api requests before rendering the page: const Profile = { template: '#profile', attributes: null, photos: [], data: function () { return {attributes: Profile.attributes, photos: Profile.photos}; }, beforeRouteEnter

Get data from api before rendering component

Alex I send 2 api requests before rendering the page: const Profile = { template: '#profile', attributes: null, photos: [], data: function () { return {attributes: Profile.attributes, photos: Profile.photos}; }, beforeRouteEnter

Get data from api before rendering component

Alex I send 2 api requests before rendering the page: const Profile = { template: '#profile', attributes: null, photos: [], data: function () { return {attributes: Profile.attributes, photos: Profile.photos}; }, beforeRouteEnter

How can I have a jQuery mobile spinner before the data is loaded?

Steven Matthews EDIT: I'm specifically looking for a solution using jQuery Mobile. jQuery Mobile has specific methods (as far as I know) that do exactly what I want. I don't want normal Javascript to have a spinning gif. This is not why I am posting this quest

How can I have a jQuery mobile spinner before the data is loaded?

Steven Matthews EDIT: I'm specifically looking for a solution using jQuery Mobile. jQuery Mobile has specific methods (as far as I know) that do exactly what I want. I don't want normal Javascript to have a spinning gif. This is not why I am posting this quest