score:0
Accepted answer
don't store entire components in the state. only store the information needed to render them. also, you're not using the result of the fetch, and you're state is also kinda referencing itself (since it's a component which has the state as a prop).
you'll want to do something like this:
this.setstate({
playerdata: result.data // store data from result object in state
})
and then render the component when the data is there:
{
this.state.playerdata === null ?
"loading player data..." :
<userdata info={this.state.playerdata} />
}
Source: stackoverflow.com
Related Query
- how can i render a component with an API call with props react js
- Render Component with props based on an API call?
- Setting up props for a component with an API call to data in MongoDB
- Using an API call in ComponentDidMount to update Redux store makes my component render twice
- How to load child component with props on first render with React Hooks
- Call api before first render in functional component in React.js
- Using classnames to dynamically style component with CSS based on props value
- How to mock properly with Jest a React component using render props
- Make a second API call based on first api call response in React with hooks
- How to test component with API call in react?
- React.js - Render Components with Different Styles based on props
- Render select option based on a API call in react
- React Redirect with props does not render final component
- React HOC with async call render component before the logic
- Render React component with onClick and execute props function
- update react child component's state using props received from an async api call made in the parent component
- Render any child component with props from string
- Change react component css based on props with css-modules
- Reusable react component with Canvas doesn't render canvas with its props
- Router with render not passing props in another component
- React Redux Problem: How to call multiple api in your react component with React Redux Toolkit RTK queries?
- trying to render same react component with dynamic props (the props come from a json file)
- Passing props through Link to a child component to complete the url to make an api call
- UseEffect not fired when redux props change caused by async api call with redux-thunk
- Render new react component based on API fetch
- How to call a component with props given by a navlink in react?
- API call with ReactJs Component doesnt work
- How to call API and render a new component
- How do I make a component to render only when API call is completed?
- Functional Component unable to render return value based on props values
More Query from same tag
- React Virtualized - Changing the height of a List Row post render
- React CRA with SSR configuration throws 404 when using the resulting html
- Why is my path to my image not working in react?
- Modal.Header closeButton event registration
- react-testing-library check founded element tag
- React.js: Add component with value
- React App - render() - map () - mapping with if-else condition
- How to send props to a component in react with conditional?
- React Tutorial :Composing components show blank page
- Page does not refresh automatically after DELETE and UPDATE item on the lists. React-Redux
- Prevent the button click again once the dropdown menu has opened from the button React.js?
- React Redux toolkit how to implement search
- React Router confusion
- Populating initialState in reducer through localStorage
- React: filter array: Can I work with elements that didn't pass the test?
- Reactjs map function - iterate json object
- onChange is not working but is logged in the console
- Adding colDefs dynamically
- Error while updating property 'nativeBackgroundAndroid' of a view managed by: RCTView
- Ionic React 4.11 : How to Push and Pop in Navigation (IonNav)
- Antd and React Suite Sliders show up "invisible", but are still there
- React Error annot read property 'onChange' of undefined
- How to disable Submit button outside the Antd Form when the fields are invalid?
- How do I resolve "non-configurable property "ChoiceGroupOption" in a React.js app, I am using Parcel and imported comp from "office-ui-fabric-react"
- Function render after splice and setState()
- How to pass internal state to global state using Redux
- React router not rendering JSX components
- React.js: How to call function only once watching scroll position
- Redux-form submit error
- React useState with WebSocket causes array to not update correctly