score:8
the way you are doing it, you could validate the response state object in your render method, and if it is null/empty, then return <div>loading...</div>
.
when your state is then updated based on the response, the component will automagically re-render. this time, the object will be populated and you can return your component html.
e.g.
render(){
if (!this.state.response){
return <div>loading...</div>
}
return (
<div>proper stuff</div>
);
}
edit on a site note, if you set the initial state in the constructor, you can make sure the object isn't empty, but just has null/empty values. this could also help depending what your render
method is doing, e.g.
constructor(props){
super(props);
this.state = {
response: {...}
};
}
score:3
your render code should be
render(){
return({this.state.response?
<div> render your component here</div>:
<div> loading ... </div>});
}
this way your component would not render till it has the data and show loading ...
text instead.
Source: stackoverflow.com
Related Query
- ReactJS - load the data before rendering the component
- Rendering a ReactJS component in memory before placing it in the DOM
- How to load firebase data before the component renders in react?
- Load async data before rendering the DOM
- How can I load the data before the component in ReactJS?
- How to stop the component from rendering before ajax call is completed in reactjs
- React component responsible for receiving data from a product and rendering it is rendered before the data arrives
- How can I prevent a component from rendering before data is loaded?
- Reactjs: How to fetch data to loaded before the component is mounted?
- How do I stop a component rendering before data is fetched?
- ReactJS component rendering and how to append elements to the div the component is mounted on
- Load the component when all data has ready
- React Hooks: how to wait for the data to be fetched before rendering
- Wait for external script to load before the React component
- Sending data from a form to the parent component in ReactJS
- React Router "Link to" does not load new data when called from inside the same component
- Unable to read props data object in getInitialState and ComponentDidMount in the child component in reactjs
- How to pass data in server side rendering to reactjs component from node
- Make useEffect hook run before rendering the component
- React, fetch data from database before rendering component
- My component is animating after page load when the data is loaded in the useState
- How to reload the Data of a child when a child Component is being rendered in ReactJs
- How to load the API data to react component once the promise is resolved?
- conditional rendering of the same component with different props does not unmount the component in ReactJS
- ReactJS is calling the render method before it receives the data to render
- React functional component is not rendering when updating the Sate after pushing data to array
- How to load state from local storage before mounting the component in React.js?
- Is it possible to initialize the state of a component with API data before the initial mounting of the component?
- Component renders and gives an error before the data is completely loaded from the API
- React component isn't re rendering the fetch data in unit test
More Query from same tag
- React - Event handling on mapped button
- Error occured in react.production.min.js after deploying react app to the aws amplify
- How to pass style props for a specific component in react-native
- how to use preventDefault() While passing variable in react?
- React element is not defined
- OnClick, apply style on one array element
- typesrcript reactjs : is missing the following properties from type
- Mock Ajax (Reactjs + Mobx)
- Unit testing React click outside component
- How do I configure webpack to run bootstrap and sass?
- Is it safe to useMemo for JSX?
- How to use webpack-hot-server-middleware with Firebase functions in express
- Change parent's state using child arrow functions, React
- Using for loop render some Html elements in React render function
- How do I test an html button within a React prop?
- Why am I receiving 'NaN' from my reducer function?
- Calling a function in JS using string
- Change color & background-color of NavDropdown in react-bootstrap
- React JS render list data in separate row
- How can I create a button to a dialog box inside the PopperComponent of Material UI Labs Autocomplete
- React JS To do list app | Get value and push to state
- React get context value for graphql query
- @SVGR cannot open assembly
- axios.post().then() not passing resolved data to callback function
- How to initialize to an empty array if my 'students' parameter is not passed
- How to print a string that is inside an object in js?
- Redux state getting reset after page change
- How to convert Google Sheets v4 api output to a normal JavaScript Array of Objects?
- Redirect in an exported function with react-router-dom without passing anything?
- Multiple API handling through Axios in react application