Can I use component in ItemSeparatorComponent in flat list?

Question

I was thinking about how to use ItemSeparatorComponent in Flat list

It works if I use :

import Seperator from '../Seperator';

        <FlatList
          ItemSeparatorComponent={() => <Seperator />}
          data={this.props.x}
          renderItem={({ item }) => this.renderX(item)}
        />

Can I just use <Seperator /> like the following?

import Seperator from '../Seperator';

           <FlatList
              ItemSeparatorComponent={ <Seperator />}
              data={this.props.x}
              renderItem={({ item }) => this.renderX(item)}
            />

It doesn't work! Why?

Answer 1

If your <Separator/> is a stateless component without lifecycle methods, you could change them to functional components like this:

import React from 'react'
import {View} from 'react-native'

const Separator= (props) =>
  <Text>{...}</Text>

export default Separator

In doing so, you don't need an explicit return. If you stick with class components (with state, lifecycle-methods or render...), you need to use arrow functions (implicit return).