Untitled

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;