rn-9-2. Todoアプリに完了機能を追加

import { View, Text, TextInput, Button, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
import { useState } from 'react';

export default function App() {
  const [text, setText] = useState('');
  const [todos, setTodos] = useState([]);
  
  const addTodo = () => {
    if (text.trim()) {
      const newTodo = {
        id: Date.now().toString(),
        text: text,
        // ここにcompleted: falseを追加してください
        
      };
      setTodos([...todos, newTodo]);
      setText('');
    }
  };
  
  // ここにtoggleTodo関数を作成してください
  // todosをmapして、指定されたidのcompletedを反転
  
  
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };
  
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Todo リスト</Text>
      
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          value={text}
          onChangeText={setText}
          placeholder="新しいTodoを入力"
        />
        <Button title="追加" onPress={addTodo} />
      </View>
      
      <FlatList
        data={todos}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <View style={styles.todoItem}>
            {/* ここにチェックマークとテキストを表示 */}
            {/* 完了している場合は☑と取り消し線 */}
            {/* 未完了の場合は□ */}
            <Text style={[
              styles.todoText,
              // ここに条件付きスタイルを追加
            ]}>
              {/* ここに条件でチェックマークを表示 */} {item.text}
            </Text>
            
            <View style={styles.buttonContainer}>
              {/* ここに完了/未完了ボタンを追加 */}
              <TouchableOpacity 
                style={styles.toggleButton}
                onPress={() => toggleTodo(item.id)}
              >
                <Text style={styles.buttonText}>
                  {/* 完了している場合は「未完了」、そうでなければ「完了」 */}
                </Text>
              </TouchableOpacity>
              
              <TouchableOpacity 
                style={styles.deleteButton}
                onPress={() => deleteTodo(item.id)}
              >
                <Text style={styles.buttonText}>削除</Text>
              </TouchableOpacity>
            </View>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#333',
  },
  inputContainer: {
    flexDirection: 'row',
    marginBottom: 20,
    gap: 10,
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 5,
    padding: 10,
    fontSize: 16,
  },
  todoItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#F5F5F5',
    padding: 15,
    marginBottom: 10,
    borderRadius: 5,
    borderLeftWidth: 4,
    borderLeftColor: '#2196F3',
  },
  todoText: {
    fontSize: 16,
    flex: 1,
  },
  completedText: {
    textDecorationLine: 'line-through',
    color: '#999',
  },
  buttonContainer: {
    flexDirection: 'row',
    gap: 5,
  },
  toggleButton: {
    backgroundColor: '#4CAF50',
    padding: 8,
    borderRadius: 5,
  },
  deleteButton: {
    backgroundColor: '#FF5252',
    padding: 8,
    borderRadius: 5,
  },
  buttonText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 12,
  },
});