Object or destructuring in Javascript function parameters?

Question

In the React Native FlatList documentation, this example is used:

_renderItem = ({item}) => (
    <MyListItem
      id={item.id}
      onPressItem={this._onPressItem}
      selected={!!this.state.selected.get(item.id)}
      title={item.title}
    />
  );

  render() {
    return (
      <FlatList
        data={this.props.data}
        extraData={this.state}
        keyExtractor={this._keyExtractor}
        renderItem={this._renderItem}
      />
    );
  }

Can someone explain to me why "item" is wrapped in curly braces on the first line? Is item being destructured off of something? Why wouldn't you pass the item as a normal parameter (wrapped with parentheses or without, since it's only a single param)?

Answer 1

Based on the React Native docs , you are correct in stating that object destructuring is occurring.

Here is the full method signature

renderItem({ item: Object, index: number, separators: { highlight: Function, unhighlight: Function, updateProps: Function(select: string, newProps: Object) } })

For each element provided in the data prop, FlatList will pack this data into an object and then renderItem will be called with this object as the parameter

To answer your question of why: Daniel does a good job of explaining it. It comes down to a variable number of parameters that can be passed to the renderItem function, such as if you need to override when the elements in your FlatList should update. Therefore, you would utilize the updateProps function that gets passed.

Answer 2

This is a convention that probably has the following reason:

If you have a function with parameters (a,b,c) => {}

you are constrained by these order, you need to change the interface of function when you want to add the next parameter.

In case of function ({a,b,c}) => {}

you can put to them a and c not mentioning about b, and not remembering their order. Additionally, in the next version of the framework you can easy depreciate and add new parameters so this pattern has some advantages.

Answer 3

The reason is because you are requesting that specific item , like you import a module

import React, { Component } from 'react';

then you can directly call extends Component

If you don't use that you need to

import React form 'react'; 
//or
import * as React from 'react';

And you need to 'find' where component is extends React.Component

With flatlist is the same, you can import ({item , index}) and call it by typing item or ìndex (for the index)

Or you can import the whole object (Object) , and call it with Object.item , you can also call the index this way Object.index

Answer 4

the function parameter holds the information of the item that is about to enter. so, therefore, each item has information of:

{ item: Object, index: number, separators: { highlight: Function, unhighlight: Function, updateProps: Function(select: string, newProps: Object) } }

destructuring is done since only item property in the info object is more important, which holds a value passed to the function param from the data array