How can I convert stateless function to class component in react native

Question

I am new in react native, I have been looking for how to convert this function to a class component in react native. Please I need help to convert the code below to react component.

import React from 'react';
import { View, Image, ScrollView } from 'react-native';

import styles from './styles';

export default ({captures=[]}) => (
    <ScrollView 
        horizontal={true}
        style={[styles.bottomToolbar, styles.galleryContainer]} 
    >
        {captures.map(({ uri }) => (
            <View style={styles.galleryImageContainer} key={uri}>
                <Image source={{ uri }} style={styles.galleryImage} />
            </View>
        ))}
    </ScrollView>
);

What's the specific issue? This seems like a component with only a render. And why convert it? — Dave Newton, Jun 20 '20 at 23:13
It already is a component, specifically a function component. Are you wanting to convert it into a class component instead? — Nicholas Tower, Jun 20 '20 at 23:13
Do you know how to create a class component? May you show your attempt at converting this function component? — evolutionxbox, Jun 21 '20 at 00:07

score 0 · Accepted Answer · answered Jun 21 '20 at 00:27

To turn this into a class component, just move the code into the class component's render method, and change references to props with references to this.props. For this component, no other changes are needed.

export default class Example extends React.Component {
  render () {
    const { captures = [] } = this.props;
    return (
      <ScrollView 
        horizontal={true}
        style={[styles.bottomToolbar, styles.galleryContainer]} 
      >
        {captures.map(({ uri }) => (
          <View style={styles.galleryImageContainer} key={uri}>
            <Image source={{ uri }} style={styles.galleryImage} />
          </View>
        ))}
      </ScrollView>
    )
  }
}

How can I convert stateless function to class component in react native

1 Answers1