I have been pondering the possibility of creating animated buttons using setTimeout on map elements. As I delve into learning React Transition group, I came up with this code snippet:
function NavItemSub(props) {
const array1 = props.array1;
return (
<ul className="gallery-menu" > ;
<TransitionGroup className="todo-list"
component={null}>{array1.map((e, index) => (
<SwitchTransition>
<CSSTransition
key={index}
in={true}
timeout={1000}
classNames="item"
appear={true}
>
<li key={index} className="item">
<a href="#" className="icon-button-sub">{props.icon}{e}</a>
</li>
</CSSTransition>
</SwitchTransition>
))}
</TransitionGroup>
</ul> ;
)
}
The current behavior is that all the buttons appear simultaneously. However, my goal is to make them enter one by one. I attempted to add a setTimeout function within the loop but had issues achieving the desired result as it did not return JSX element. Any suggestions or assistance would be greatly appreciated. Thank you.