[DEMO - Answered] Transformers For ReactJs

App.jsx

import { todoResponseToTodoListTransformer } from './todoResponseToTodoList';

export const App = () => {
  const [todos, setTodos] = useState([]);
  useEffect(() => {
    const getTodos = async () => {
      const { data } = await axios.get('https://jsonplaceholder.typicode.com/todos/');
      
      const transformedTodos = data.map(todoResponseToTodoListTransformer); // ✅
      setTodos(transformedTodos);
    };
    getTodos();
  }, []);
  return (
    <div>
      <TodoList 
        todos={todos}
      />
    </div>
  );
};

const TodoList = ({
  todos
}) => (
  <div>
    <h1>Todo List</h1>
    <ul>
      {todos.map((todo) => (
        <li
          key={todo.id}
          style={{
            textDecoration: todo.isCompleted ? 'line-through' : 'none' 
          }}
        >
          {todo.title}
        </li>
      ))}
    </ul>
  </div>
);