score:4
Accepted answer
its a bit tricky, but you need to animate only when the items are available:
animate={recipes.length > 0 && "visible"}
that's because on the first render you actually animate an empty array.
animate="visible"
then, when you update the recipes
after the async call, you don't trigger the animation again.
const container = {
hidden: { opacity: 1, scale: 0 },
visible: {
opacity: 1,
scale: 1,
transition: {
staggerchildren: 0.5
}
}
};
const item = {
hidden: { x: 100, opacity: 0 },
visible: {
x: 0,
opacity: 1
}
};
const request = `https://www.themealdb.com/api/json/v1/1/search.php?s=chicken`;
function app() {
const [recipes, setrecipes] = usestate([]);
useeffect(() => {
const getrecipes = async () => {
const response = await fetch(request);
const data = await response.json();
setrecipes(data.meals);
console.log(data.meals);
};
getrecipes();
}, []);
return (
<div classname="app">
<motion.ul
variants={container}
initial="hidden"
animate={recipes.length > 0 && "visible"}
>
{recipes.map(recipe => (
<motion.li key={recipe.idmeal} variants={item}>
<recipecard title={recipe.strmeal} />
</motion.li>
))}
</motion.ul>
</div>
);
}
Source: stackoverflow.com
Related Query
- useEffect dependency with Context API. My code works fine with empty array but still gives the warning
- [0,1,2,3].map works fine, array.map gives strange results
- Spring Boot Security module gives 403 error when called by using axios from react but works fine in postman
- Include nested map array values in search results
- React js can't access array useState by index, map works
- React gives me TypeError: props.posts.map is not a function when trying to map through an array of posts
- Passing property from map function to component in array results in property inside { }
- Reading array from different ways gives me different results
- React.js: Array won't print on screen but console.log() works fine
- Whenever I wrap my App with PersistGate it gives me "TypeError: users.map is not a function" in one component, otherwise it works fine
- Using map on array of objects results in a errormessage
- Any attempt to access props in MDX component results in failed build, but dev works just fine
- Filter array and then map through filtered results
- Deployment of react app with express server gives blank screen but the app works fine with serve -s build
- Not able to .map a JSON array of objects from Node.js server, but local variable works fine in React
- Render Content Dynamically from an array map function in React Native
- How to map an array of objects in React
- Reactjs map works but forEach doesn't
- React app slows to a crawl with chrome developer tools open. Works fine in incognito
- How to show results of a map in two or more columns using react
- React - map array to child component
- Get size of array returned by map in React render
- REACT: Map over nested array of objects
- Firefox gives Network Error whereas other browsers work just fine (ReactJS App)
- How to correctly replace type any when returning children or map of children if array
- NextJS bug: Component props are undefined when building the project (everything works fine on dev mode)
- react setState array of object using map doesn't work?
- JSX map only the first object in array
- how to update input text which is render by array map in REACTJS
- Map array of strings as object properties
More Query from same tag
- react headless ui combox autocomplete, how to search by enter key
- Trying to deploy my react app on Netlify which I created on a local host, but get an error while trying to deploy
- How to use React Ref with Styled Component
- reactjs: how to detect data changed and show notification
- react app refreshing page for each item deletion
- ASP.NET MVC and Angularjs vs ASP.NET MVC and Reactjs
- React-Loadable only creates first component chunk
- Dont show me again message with react hooks
- React - dynamically create nav from components on page
- Overriding CSS of TinyMCE editor in React
- Can not apply custom theme in MUI react
- How to update value array in object React js
- Is there any way of using custom icons in primereact tree?
- What is meant by "one level deep"?
- Why do I have to click TextField twice in order for my list to display?
- How can I access the original names of my input fields, in dot notation, from formik context?
- Is there any way to stop on hydration React App in Cypress?
- How to access the catch all route after ajax call failed while not changing URL with react-router
- Use (nested) prop value to reference another prop
- Unable to set text box value in React
- Why can't I access state and props inside event handler
- Initial data loading ReactJS
- How to serve production react bundle.js built by webpack?
- ReactJs how to access to DOM element
- React on click call API and create csv
- how to filter an array based on values from another array in React JS
- TS1128: Declaration or statement expected (end of file)
- Removing function on server which delete array with bunch IDs
- How can I apply this style to my slideshow?
- How to render all object properties from array of objects