I noticed this behavior while using the react-transition-group
package in a gatsby project I'm working on. I have a list of "tags" that are added to an active list as they are picked from another master list. Clicking a tag from the master list adds it to the active list, and clicking a tag from the active list removes it. Pretty much how you would expect something like this to work.
The transition in works just fine, but when transitioning out the tags re-organize themselves in a strange way. We have five tags with the following values:
If you click the Family Sized
tag to remove it, the following occurs:
Family Sized
disappears instantlyLow Cholesterol
and Low Sodium
shift instantly to the leftLow Sodium
instantlyLow Sodium
transitions outThe expected behavior is that the Family Sized
tag transitions out from where it is in the middle of the group. I should note that it works fine if you remove the last tag from the active list, this only happens when removing a tag from any other position.
Here is a slowed-down GIF of the transition and here is my code:
<TransitionGroup className='tag-container'>
{filter.map((tag, index) => {
return (
<CSSTransition key={index} timeout={250} classNames={`tag`}>
<TagButton value={tag} onClick={onClickFunction} className={`${screenStyle} active`}>{tag}</TagButton>
</CSSTransition>
)
})}
</TransitionGroup>
filter
is an array destructured from the component's state.<StaticQuery>
from gatsby
used in the same render()
method of the component if that matters.<TagButton>
is a styled component from styled-components
package, not a separately imported component.The React Transition Group contains three main components: 1 Transition 2 CSSTransition 3 TransitionGroup More ...
You can improve the UI by using React Transition Group for that: npm must be installed on your machine. You can install transition group in your project component by using the command: You can import transition component in project component by using the command:
If you pass the enter prop to the CSSTransition with a value of false, then the entrance transition will be disabled. Similarly, if you pass the exit prop to the CSSTransition with a value of false, then the exit transition will be disabled. There are six lifecycle props in React Transition Group.
The transitions are added by passing an object with enter, enter- active, exit, and enter-active keys, and they’ll refer to JSS class names. Debugging React applications can be difficult, especially when there is complex state.
Adding specific identifier in your array and setting key of each element to each identifier in map method will solve your problem.
import React from "react";
import ReactDOM from "react-dom";
import { Button } from "react-bootstrap";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "bootstrap/dist/css/bootstrap.css";
import "./styles.css";
import uuid from "uuid";
function App() {
const [items, setitems] = React.useState([
{ id: uuid(), name: "Dairy Free" },
{ id: uuid(), name: "Party Food" },
{ id: uuid(), name: "Family Sized" },
{ id: uuid(), name: "Low Cholesterol" },
{ id: uuid(), name: "Low Sodium" }
]);
const removeitem = item => {
setitems(items.filter(itemname => itemname.id !== item));
};
return (
<div className="App">
<TransitionGroup className="todo-list">
{items.map(data => (
<CSSTransition timeout={500} classNames="item" key={data.id}>
<Button className="m-2" onClick={() => removeitem(data.id)}>
{data.name}
</Button>
</CSSTransition>
))}
</TransitionGroup>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
This problem is already solved here, so please checkout to understand this strange behavior.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With