CODEWITHSUNDEEP
react-native
Nat
Nat

Reputation: 749

Confusing React Native syntax

How would "item" know that it has the data from the Data properties? I mean I passed in the data using the data properties of Flatlist component and it seems I can give any name to the keyExtractor property and it will know to get the data from the data property. Is there any explanation for this? Thanks a lot and in advance.

<Flatlist 
data={someData} 
keyExtractor={item => item.TitleID}/>

Upvotes: 0

Views: 61

Answers (2)

Kluddizz
Kluddizz

Reputation: 723

I'll give you a briefly introduction and an example of what callback functions are and how to use them.

Basically you can define a function and it's parameters with any types. By that, you can also expect functions as parameters (those are also called higher order functions) and call them inside the parent function at any time you wish. Look at this and especially at the lambda calculus.

function bar(something) {
  console.log(something);
}

function foo(callback) {
 callback("Hello");
}

// This will generate the output 'Hello'.
foo(bar);

// This is the same, but using lambda calculus.
foo(something => console.log(something));

As you can see, you can pass function definitions as parameters to other functions. This is exactly, what your example is doing. I also give you an extra example.

import React from "react";

const FlatList = ({ keyExtractor, data, ...props }) => {
  return (
    <ul>
      {data.map((item, index) => (
        <li key={index}>{keyExtractor(item)}</li>
      ))}
    </ul>
  );
};

export default FlatList;

Here I tried to mockup the FlatList of your example. You can see the data.map call, which acts as the higher order function from the previous example. The FlatList component has a property called keyExtractor, which will be called for each element of the data property. Now, you can easily provide keyExtractor as follows.

const someData = [
  { name: "Something", id: 1 },
  { name: "Anything", id: 2 }
];

//...

<FlatList
  data={someData}
  keyExtractor={item => item.id}
/>

This will render an unordered list, which contains the id of every element of someData. In this case it is just a projection of your data.

Here the executable example https://codesandbox.io/s/laughing-paper-lmi22.

Cheers

Upvotes: 1

Prateek Thapa
Prateek Thapa

Reputation: 4938

Under the hood, FlatList passes your data item to the keyExtractor.

Here your function myKeyExtractor accepts a parameter, which is basically the reference to your data.

function myKeyExtractor(item) {
  return item.TitleID;
}

<Flatlist 
  data={someData} 
  keyExtractor={myKeyExtractor}
/>

Let's take a simple example here. It is similar to the parameters of add and subtract functions here.

You could name the parameters anything you like. Parameters are just placeholders for your value.

function add(x, y) {
   return x + y;
}

function subtract(thisIsAFirstParameter, thisIsASecondParamater) {
   return thisIsAFirstParameter - thisIsASecondParamater;
}

add(10, 5);
subtract(10, 5);

Upvotes: 0

Related Questions