Argument of type 'string' is not assignable to parameter of type 'Pick<IJobs, "name">'

Why I get this error?

Argument of type 'string' is not assignable to parameter of type 'Pick<IJobs, "name">'.
  Type 'string' is not assignable to type 'Pick<IJobs, "name">'

mockData:

export const Jobs: IJobs[] = [
  {
    id: '1',
    name: 'Trader',
    available: true
  },
  {
    id: '2',
    name: 'Seller',
    available: true
  },
  {
    id: '3',
    name: 'Manager',
    available: false
  },
  {
    id: '4',
    name: 'Cleaner',
    available: false
  }
];

Model:

export interface IJobs {
  id: string;
  name: 'Trader' | 'Seller' | 'Manager' | 'Cleaner';
  available: boolean;
}

Main.tsx

  const handleSetJobsAndOpenModal = (jobs: Pick<IJobs, 'name'>) => {
    setCurrentJobs(jobs);
  };
  const scrollData = useCallback(() => (
    <View style={s.containerMap}>
     {
       Jobs.map(((el) => (
         <Pressable onPress={() => handleSetJobsAndOpenModal(el.name)} style={s.Btn} key={el.id}>
           <Text>...</Text>
         </Pressable>
       )))
     }
     </View>
  ), [])

The error comes at " () => handleSetJobsAndOpenModal(el.name) <-"

What I am doing wrong ?

>Solution :

You are picking name from IJobs. This will yield in a key-value pair.

Thus, it is expected by the type Pick<IJobs, 'name'> that it receives an object with a key named name and a value being one of 'Trader' | 'Seller' | 'Manager' | 'Cleaner'.

The error can be solved as follows.

handleSetJobsAndOpenModal({name: el.name})

If you just want the plain string, then I would suggest that you separate the types as follows.

export type JobName = 'Trader' | 'Seller' | 'Manager' | 'Cleaner'

export interface IJobs {
  id: string;
  name: JobName;
  available: boolean;
}

Then, use it as follows.

const handleSetJobsAndOpenModal = (jobs: JobName) => {
    setCurrentJobs(jobs);
  };
  const scrollData = useCallback(() => (
    <View style={s.containerMap}>
     {
       Jobs.map(((el) => (
         <Pressable onPress={() => handleSetJobsAndOpenModal(el.name)} style={s.Btn} key={el.id}>
           <Text>...</Text>
         </Pressable>
       )))
     }
     </View>
  ), [])