You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
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!
The text was updated successfully, but these errors were encountered: