Q:

Making TodoList in React, how to cross out item when finished (not using index)?

I'm new to React and learning how to make a Todo App. I need to know how to cross out a todo once the checkbox input is clicked, and uncrossed once clicked again (toggle) in a controlled environment. I've put in my research; the thing is, everyone seems to be using index, while I have heard not to use index as it leads towards problems. Any help would be greatly appreciated; here's my code below:
App (parent component)
// dependencies
import React from 'react';
// local files
import './App.css';
import List from '../components/List';

class App extends React.Component {
  // state
  state = {
    todos: [
      {key: 0, text: "Go shopping", isCompleted: false},
      {key: 1, text: "Lift", isCompleted: false},
      {key: 2, text: "Go for walk", isCompleted: false}
    ],
    currentTodo: {
      key: "",
      text: "",
      isCompleted: false
    }
  };

  // event handlers

  // JSX
  render() {
    return (
      <div className="App">
        <div className="title">
          TodoList
        </div>
        <List todos={this.state.todos} />
      </div>
    );
  };
};

export default App;

List Component:
// dependencies
import React from 'react';
// local files

const List = (props) => {
  const TodoList = props.todos.map((todo) => {
    return (
      <div className="TodoItem" key={todo.key}>

          {todo.key} {todo.text}
          <input type="checkbox" />

      </div>
    );
  });

  return (
    <div className="Show-List">
      {TodoList}
    </div>
  );
};

export default List;

A:

For update operation you can use index, there is no issue
A unique key is required for list of items, so that react can React identify which items have changed

Keys help React identify which items have changed, are added, or are
  removed. Keys should be given to the elements inside the array to give
  the elements a stable identity ( Ref )

Hope the below code snippet help you:
const TodoList = props.todos.map((todo.index) => {
    return (
      // index is not a good option here, here you should use unique key only
      <div className="TodoItem" key={todo.key}>

          {todo.key} {todo.text}

          // but here you can use the index, so you can update the todo easily
          // as you are just using it to get access of specific todo
          <input type="checkbox" checked={todo.isCompleted} onChange={() => props.handleCheck(index)}/>

      </div>
    );
});

WORKING DEMO :

