Untitled
unknown
plain_text
a year ago
1.4 kB
2
Indexable
Never
import React, { useState } from 'react'; const tasks = [ { id: 1, type: 'Task 1', assigned: 'John', assignee: 'Alice', status: 'Pending', deadline: '2023-08-31', }, { id: 2, type: 'Task 2', assigned: 'Mary', assignee: 'Bob', status: 'Completed', deadline: '2023-09-05', }, // Add more tasks as needed ]; const App = () => { const [selectedFields, setSelectedFields] = useState({}); const fieldNames = Object.keys(tasks[0]); const handleFieldChange = (taskId, fieldName) => (e) => { setSelectedFields((prevSelectedFields) => ({ ...prevSelectedFields, [taskId]: fieldName, })); }; return ( <div className="App"> <h1>Task Manager</h1> <ul> {tasks.map((task) => ( <li key={task.id}> <div> <strong>{task.type}</strong> <select value={selectedFields[task.id] || 'id'} onChange={handleFieldChange(task.id)} > {fieldNames.map((fieldName) => ( <option key={fieldName} value={fieldName}> {fieldName} </option> ))} </select> </div> <p>{task[selectedFields[task.id] || 'id']}</p> </li> ))} </ul> </div> ); }; export default App;