I'm new to typescript, converting an array into an option tag but got the error, My interface is

interface ViewEmployeeManagerPostType {
  id: string;
  user: string;
  department: string;
  experience: string;
  height: string;
  value: string;
  children: React.ReactNode[] | React.ReactNode;
};

My Array

const [ManagerEmployee, setManagerEmployee] = useState<ViewEmployeeManagerPostType[]>([]);

Component return ()

----
----
<option value="">Select Employee ID</option>
    {ManagerEmployee.map((option) => 
       <option key={count  } value={option}>
          Employee ID = {option}
       </option>
     )}
----
----

I'm getting error on the option opening tag and value

CodePudding user response：

In the interface, you need to use children: React.ReactNode; instead of children: React.ReactNode[] | React.ReactNode;

In addition to that, the option represents the ManagerEmployee object and hence you cannot simply print it out using {option}. Instead, you need to use value={option.value} and Employee ID = {option.id}

----
----
<option value="">Select Employee ID</option>
{ManagerEmployee.map((option) => 
   <option key={option.id} value={option.value}>
      Employee ID = {option.id}
   </option>
)}
----
----

CodePudding user response：

As you see, there's an unambiguous requirement: 'children' prop expects a single child, thus

children: React.ReactNode;

And when you provide array of React nodes to children component prop, just wrap them with <Fragment> or <> like this

children={
   <>
    <option value="">Select Employee ID</option>
    {ManagerEmployee.map((option) => 
       <option key={option.id} value={option.value}>
         Employee ID = {option.id}
       </option>
   )}
   </>
}