useTransition item doesn't pass to element

[poljsakerik]

Hey, I have just began with reac-spring and wanted to add a basic animation to a list of tasks. The problem I have is that the body of a tasks shows up however it's missing all the content. Here is the code:

import Task from "./Task";
import { animated, useTransition } from "react-spring";

const Tasks = ({ tasks, onDelete, onToggle }) => {
  const transition = useTransition(tasks, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
  });

  return (
    <div>
      {transition((item, style) => (
        <animated.div style={style}>
          <Task
            key={item.id}
            task={item}
            onDelete={onDelete}
            onToggle={onToggle}
          />
        </animated.div>
      ))}
    </div>
  );
};

export default Tasks;

import { FaTimes } from "react-icons/fa";

const Task = ({ task, onDelete, onToggle }) => {
  return (
    <div
      className={`task ${task.reminder ? "reminder" : ""}`}
      onDoubleClick={() => onToggle(task.id)}
    >
      <h3>
        {task.text}{" "}
        <FaTimes
          style={{ color: "red", cursor: "pointer" }}
          onClick={() => onDelete(task.id)}
        />
      </h3>
      <p>{task.day}</p>
    </div>
  );
};

export default Task;

The tasks are successfully passed to Tasks function, so I assume the issue is in how I use transitions. I will also add the result.

Basically the text field is missing.

[joshuaellis]

If you can supply a codesandbox someone can probably advise better 👍🏼

[poljsakerik]

Hey yeah just realized the issue, style and item need to be swithched in the function call. I was bascially passing the item to the style and style to the item.

{transition((item, style) => (
        <animated.div style={style}>
          <Task
            key={item.id}
            task={item}
            onDelete={onDelete}
            onToggle={onToggle}
          />
        </animated.div>
      ))}