从React中父组件的回调函数中的子组件访问变量，并在父组件中呈现返回的值

Question

How does the following situation work:

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>

Here, FlatList receives a callback function which can access an object that contains item variable(as can be seen) which is coming from the child component FlatList . It somehow is able to give the object(containing item ) to the callback and still render the item using renderItem prop that is passed to it.

I am trying to achieve something similar here: my sandbox

But I am facing this error which says that React child cannot be a function. The point is completely valid I agree, but I am unable to think of something else as to how to achieve it. Maybe I am missing some simple concept here.

Any help will be appreciated. Thanks in advance!

Answer 1

As per your sandbox, you need to pass arguments when its being called in order to get any return value. In a class function, you don't need to pass values if you are using class level variables, but in your case you are using arguments to execute the function that is why you need to pass arguments to it. That is why, you are not able get the value as when your component is rendering summary or details , its finding the reference of the function rather the actual return value.

I have made changes to your sandbox to pass dummy values, you can replace it as per your requirements.

Answer 2

You should update your code with return statement.

<FlatList
    data={[{key: 'a'}, {key: 'b'}]}
    renderItem={({item}) => {
        return <Text>{item.key}</Text>;
    }}
/>

Answer 3

Just simply use ( and ) instead of { } . This will return your component.

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => (
       <Text>{item.key}</Text>
     )   
  }
/>