score:2
Accepted answer
you might have misunderstood with the infinite loop error
it's actually a render error as being shown here:
to fix your render error, simply put an actual string variable in the {}
because the response was an array of this object, so you can't simply render the whole object but need to pick an actual string variable inside:
[{
"userid": 1,
"id": 1,
"title": "delectus aut autem",
"completed": false
}],
change to something like this:
const showdata = ({ userdata }) => {
console.log("here", userdata);
return (
<>
{userdata.map((info, idx) => (
<div classname="user-data" key={idx}>
{info.title} // <-- put a title here.
</div>
))}
</>
);
};
score:-2
remove
useeffect(() => {
console.log(userdata);
},[userdata])
this will reevaluate component whenever user data changes, which leeds to call showdata infinitely
Source: stackoverflow.com
Related Query
- Showing data from state variable in ReactJS forms infinite loop
- If a function updates a state variable which is an object and is called from a child component, what's the best way to avoid infinite renders?
- How can i get array of object from this data for state and count in reactjs
- How to bind data from getJSON to ReactJS state
- loop data from state with react.js
- React Redux state array variable pass as prop to child component, either infinite loop or empty array
- useEffect infinite loop when getting data from database
- React - Infinite loop when changing state from onChange
- Change value of field in reactjs component's state (with data obtained from firebase)
- Fetching data from backend causes infinite loop and never successfully loads
- Infinite loop when setting and using state in a `useCallback` that is being called from a `useEffect`
- Change state object variable from form input - ReactJS
- Get variable from loop in Render into componentDidMount() in ReactJS and put this variable in query parameter
- reactjs - app doesn't change state after getting data from api
- ReactJS set state does not assign array from Axios response data
- Reactjs child component goes into infinite loop on setting state array provided by parent in props
- Promise.all Showing data in loop console but not passing data to state
- how to send data from child component to parent component state in reactjs
- How to stop infinite loop when setting initial state from API with useReducer (React Hooks)
- Set state in ReactJS after receiving data from api
- cannot set State in functional component while fetching data from Firebase in reactJS
- React useEffect infinite loop fetching data from an api
- Make a for loop to show data object from API in render using Charts Reactjs
- ReactJs update state from axios api data
- React updating a components state from another component causes infinite loop
- Problem accessing data of an array created from the state in Reactjs
- change data from array state reactjs
- how to use a for loop in ReactJS to update the state on meeting some condition? loops are not requiring to traverse from every element
- ReactJS - How to pass state data and functions from one functional component to other component?
- React-native using a state variable while getting data from fetch
More Query from same tag
- Recharts ComposedChart start X-axis ticks from zero
- How do you add a new field to multiple documents after you have updated the mongoose schema?
- How to make a border not overlap another one, with multiple selections or single?
- How can i fix this case in reactjs with redux?
- ReactJS Webpack error type.toUpperCase is not a function
- Windowing in React/Gatsby/Chakra UI
- Trying to pass data from Express backend to React frontend with Axios, doesn't work
- useState not setting after initial setting
- reactivesearch: placing result count text on page
- Gatsby application that is SPA on mobile and has different routes on desktop
- how do I use a node module script in react.js?
- How to fix missing dependency warning when using useEffect React Hook? I am using nextjs app
- React/CSS: Dynamically updating className of table row works only randomly
- Can home_url() be dynamically passed to a theme built with React?
- Material UI <IconButton> not showing
- Getting wrong clientHeight of a ref inside componentDidMount
- React - How to clear the value of a React-Select when another React-Select changes
- How to include local javascript on a Gatsby page?
- Updating an object with setState in React
- How to style TexField Component with type = date on React JS
- ReactDOM.createPortal not updating
- TypeError: firebase__WEBPACK_IMPORTED_MODULE_1__.default.ref is not a function
- Expected to return a value in arrow function - useEffect
- useState function is not working in functional component
- Not getting desired values in input fields React redux or ReactJS
- React Typescript, how to use Context?
- How to declare React PropTypes XOR
- How to make selected value in single select grow similar to multi select
- Should I enable Gzip on Nginx server with SSL for a react app?
- Wrap Text Around Fixed Column Width React Bootstrap Layout