Babel code in React component to display tasks

Question

I'm trying to think of ways to clean up this component in my app so it looks more readable to other devs. This is the best I came up with so far. It's not that bad, but I think it could be a lot better. What do you guys think? How would you clean this code up to make it more readable?

const DisplayTasks = ({ tasksArray, removeTask, crossOutTask }) => { 
  return (
    <div id="orderedList">
      <ol>
        {tasksArray.map((task, index) => (
          <li onClick={ () => crossOutTask(index) } key={index} >

            { task.crossedOut 
              ? <strike>{task.title}</strike> 
              : task.title }

            <button id="removeButton" onClick={ event => removeTask(event, index) } >
              Remove
            </button>
          </li>
        ))}
      </ol>
    </div>
  );
};
```

Answer 1

This looks pretty good. I don't really have any big comments, since I found it pretty easy to read. Nits:

• you could remove the wrapping div with the id orderedList... The ol tag serves the same purpose, plus it's not a very specific name. I think it probably makes more sense to add a class to the ol with a value like tasks.
• Generally don't use the index as a key. React uses these to figure out what to redraw. If you have some sort of ID, use that; if not, you can probably just use the task title, or a title + index. You want this to be specific... if the key too specific the component will get redrawn too much (generally not a problem). If the key is to general, components will be "stale"... not redrawn with the proper values.

Look good!