【React】ToDoリストの完了ボタンをタップして項目だけ打ち消し線が引かれるようにしたい

実現したいこと

当該コードはReact Native ですがロジック自体は関係がないためタイトルをReactにさせて頂きました。
現場のコードでは特定の項目のチェックボックス(完了ボタン)をタップしても全ての項目に打ち消し線が引かれてしまう状態ですが、これをタップした項目に適用できるようにしたいです

発生している問題・分からないこと

onPress={handlePress} のhandlePressの引数にindexを使用することは理解できます。
でもそのindexをどのように扱うべきなのか理解することができず...

該当のソースコード

DOMの当該のコード
1      <SwipeListView
2        data={tasks}
3        keyExtractor={(index) => index.toString()}
4        renderItem={({ item }) => (
5          <View style={styles.taskItem}>
6            <Text style={isPressed ? styles.doneTaskItem : null}>{item}</Text>
7          </View>
8        )}
9        renderHiddenItem={({ index }) => (
10          <View style={styles.hiddenItemContainer}>
11            <TouchableOpacity style={[styles.taskButton, styles.doneButton]} onPress={handlePress}>
12              <Icon name="done" size={20} color="white" />
13            </TouchableOpacity>
14            <TouchableOpacity
15              style={[styles.taskButton, styles.deleteButton]}
16              onPress={() => removeTask(index)}
17            >
18              <Icon name="delete" size={20} color="white" />
19            </TouchableOpacity>
20          </View>
21        )}
22        rightOpenValue={-100}
23      />
24

  const handlePress = () => {
    setIsPressed(!isPressed);
  };

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

どのように期待する処理を実現できるかわかりませんでした

補足

特になし

行動規範の内容に同意します

回答1件

現在は tasks が string[] 型になっているので、 { title: string, done: boolean }[] 型に変更すると良いと思います。

tsx
1
2  const addTask = () => {
3    if (task.trim() !== '') {
4      setTasks([...tasks, { title: task, done: false }]);
5      setTask('');
6    }
7  };
8
9  const markTaskAsDone = (index: number) => {
10    // つまり、 `index` 番目の要素だけ、done プロパティ を true に切り替える
11    setTasks(tasks.map((t, i) => i === index ? { ...t, done: true } : t))
12  }