Apply Css Animation To Div When Array.map Added Or Remove Div In React.js
Solution 1:
I guess the problem is on this line, you're using index
as key for your LineItem
.
todoState.map((item, index) =><LineItemkey={index}todoList={item}index={index}/>)
React does not recomment using indexes for keys, read more here.
You need to have some sort of id to uniquely identify your todo items and use that id
as key when you do your todoState.map((item) => ...
. So you'll have to make your todo item as an object
and not a string
.
In your TodoForm
, we'll add a generateId
and use this functions return value for our new todo's id
.
TodoForm.tsx
functiongenerateId() {
// https://stackoverflow.com/a/8084248/8062659returnMath.random().toString(36).substring(7);
}
constsendTodoItem = (e) => {
if(todoInput.trim().length > 0){
const text = todoInput.trim();
const id = generateId();
addNewTodoState({ text , id }); // notice heresetIsDisabled(false);
setTodoInput('');
}else{
setIsDisabled(true);
}
}
Now on you TodoListLineItem
, we'll remove the index
from map
and use the current todo's id
as key.
TodoListLineItem.tsx
todoState.map((item) =><LineItemkey={item.id}todoList={item}/>)
We also have to update your Line-Item
to display the text
property of the current todo.
Line-Item.tsx
<p>{todoList.text}</p>
Check this link for a demo.
--
Because we're using now an object
as a todo item, I believe you should also make changes on some parts of the app, like the model and the delete feature. But the changes above should be sufficient to achieve what you want as described on your post.
Solution 2:
A simple approach is to add the animation class with useEffect and remove it after the duration of the animation.
importReact, {useEffect, useState} from'react'constYourApp = props => {
const [animate, setAnimate] = useState(false)
const [todoState, setTodoState] = useState([])
useEffect(() => {
setAnimate( true )
setTimeout( () => { setAnimate( false ) }, 500 )
}, [todoState])
return<divclassName={animate ? "example-enter" :null } > ... </div>
}
Each time you update todoState, it will apply the animation class for 0.5s basically.
Post a Comment for "Apply Css Animation To Div When Array.map Added Or Remove Div In React.js"