Task.js

// components/Task.js

export default function Task(props) {
    // ...
    <CardActions>
        {props.isDone ? (
          <Button size="small" onClick={() => props.markTaskAsUndone(props.id)}>Mark as undone</Button>
        ) : (
          <Button size="small" onClick={() => props.markTaskAsDone(props.id)}>Mark as done</Button>
        )}
        <Button size="small" onClick={() => props.deleteTask(props.id)}>Delete</Button>
      </CardActions>
     // ...
}

// Your final file should look like this:
// https://github.com/duplxey/back4app-containers-nextjs/blob/master/components/Task.js