Animations don't work, somehow ¯\_(ツ)_/¯

[BranislavMateas]

So basically I am new here, and I am trying to make this work. BUT, my animations are not working. Correct me, but am I right, that I can use this API with functional programming? I still don't get the flipKey (i set it to {orderChange}, basically because of the fact, that animation will start when this function is called) and flipId (id of Todo). My Array of todos consists of following? Array(3) [ {…}, {…}, {…} ] 0: Object { id: "1da6a5d8-f73c-4de6-bba9-febff64b8d8b", name: "hello", complete: false, … } complete: false date: "16.7.2021" dateYes: false descr: "" id: "1da6a5d8-f73c-4de6-bba9-febff64b8d8b" name: "hello" remaining: 0 ​ 1: Object { id: "002bd3f2-ae4e-4865-8a90-b35e3ad48ac4", name: "there", complete: false, … } complete: false date: "16.7.2021" dateYes: false descr: "" id: "002bd3f2-ae4e-4865-8a90-b35e3ad48ac4" name: "there" remaining: 0 ​ 2: Object { id: "898d057e-956b-453d-8535-4e8ff4a5df62", name: "how", complete: false, … } complete: false date: "16.7.2021" dateYes: false descr: "are you" id: "898d057e-956b-453d-8535-4e8ff4a5df62" name: "how" remaining: 0

let me show you my code now: <Flipper element="ul" className="list" flipKey={orderChange}> {todosList.map((todo) => ( <Flipped flipId={todo.id} key={todo.id}> <Todo key={todo.id} exactTodo={todo} todos={todosList} toggleTodo={toggleTodo} handleCompleteTodos={handleCompleteTodos} orderChange={orderChange} /> </Flipped> ))} </Flipper>

Note: Todo is basically one big div with many things in it:

<div className="task"> <div className="item"> <div className="leftSide"> <input type="checkbox" className="confirmation" checked={exactTodo.complete} onChange={hadleTodoClick} ></input> </div> <div className="rightSide"> <h3>{exactTodo.name}</h3> {exactTodo.dateYes === true && ( <h5> do {exactTodo.date} |{" "} {exactTodo.remaining < 0 ? "Zameškaných dní: " + Math.abs(exactTodo.remaining) : "Ostávajúcich dní: " + exactTodo.remaining} </h5> )} <h4>{exactTodo.descr}</h4> </div> </div> <div className="sorting"> <FontAwesomeIcon icon={faChevronUp} onClick={handleOrderHigher} /> <FontAwesomeIcon icon={faChevronDown} onClick={handleOrderLower} /> </div> </div>

I would be glad for help. Have a good day!