# Babel code in React component to display tasks

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>
<li onClick={ () => crossOutTask(index) } key={index} >

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


• 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`.