javascript - Passing in a destructured object?

Question

const FlatListBasics = () => {
  return (
    <View style={styles.container}>
      <FlatList
        data={[
          {key: 'Devin'},
          {key: 'Dan'},
          {key: 'Dominic'},
          {key: 'Jackson'},
          {key: 'James'},
          {key: 'Joel'},
          {key: 'John'},
          {key: 'Jillian'},
          {key: 'Jimmy'},
          {key: 'Julie'},
        ]}
        renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}
      />
    </View>

So today while reading the React Native docs I came across this bit of code where we are essentially passing in a {item} as destructured.
I did read up on destructuring a bit and I know how it works but I don't understand how we are passing it in to the function as destructured and why we are doing that.

Answer 1

I don't understand how we are passing it in to the function as destructured

It's not being passed in destructured. It's being destructured on receipt, by the function. This code:

renderItem={({item}) => <Text style={styles.item}>{item.key}</Text>}

sets renderItem to a function. The function accepts a parameter, using destructuring to pick out its item property. It's just like this:

renderItem={(obj) => <Text style={styles.item}>{obj.item.key}</Text>}