Render custom component as a List Item

Question

So I was trying to render a filtered list of data on a specific screen in React-Native.

I ran into an issue where I get

Error: Objects are not valid as a React child (found: object with keys {_40, _65, _55, _72})

However, if I use regular <Text/> elements to render it, it works fine.

I think there's something Im not quite aware about when it comes to rendering custom components in flat list or even a map function

This is what my FlatList looks like:

<FlatList
      vertical
      style={{ backgroundColor: "#376772" }}
      keyExtractor={(crossing) => crossing.stop_id}
      data={props.crossings_fav}
      renderItem={( {item} ) => {
     
         return <CrossingCell
            func={() => {
              props.navigation.navigate("Crossing", {
                crossing: item,
              });
            }}
            name={item.stop_name}
            status={item.stop_status}
            is_fav={item.is_fav}
          ></CrossingCell>
      }}
    />

CrossingCell.js:

    class CrossingCell extends PureComponent {
    get_color = (v) => {
        switch (v) {
            case 'clear':
                return `#5cb85c`

            case 'busy':
                return `#f0ad4e`

            case 'stop':
                return `#d9534f`
        }
    }

    get_icon = (v) => {
        switch (v) {
            case 'clear':
                return `ios-checkmark`

            case 'busy':
                return `md-warning`

            case 'stop':
                return `ios-close`
        }
    }

    get_fav_icon = (v) => {
        const ico = v == true ? `ios-star` : `ios-star-outline`

        return ico
    }
    render() {
        return (
            <TouchableOpacity
                onPress={() => {
                    this.props.func()
                }}
            >
                <View
                    style={{
                        backgroundColor: this.get_color(this.props.status),
                        margin: 5,
                        borderRadius: 5,
                        padding: 5,
                        justifyContent: 'center',
                        alignItems: 'center',
                        borderColor: '#202B35',
                        borderWidth: 1,
                    }}
                >
                    <Text
                        numberOfLines={2}
                        style={{
                            textAlign: 'center',
                            fontSize: scale(15),
                            fontWeight: 'bold',
                            padding: 5,
                            color: '#fff',
                        }}
                    >
                        {this.props.name}
                    </Text>

                    <View
                        style={{
                            margin: 5,

                            flexDirection: 'row',
                        }}
                    >
                        <Icon
                            name={this.get_fav_icon(this.props.is_fav)}
                            type="ionicon"
                            color="yellow"
                        />
                        <View
                            style={{
                                margin: 5,
                                borderRadius: 5,
                                backgroundColor: '#202B35',
                                padding: 5,
                                flexDirection: 'row',

                                marginHorizontal: scale(100),
                            }}
                        >
                            <Text
                                style={{
                                    padding: 4,
                                    fontSize: scale(12),
                                    textAlign: 'center',
                                    color: this.get_color(this.props.status),
                                    fontWeight: 'bold',
                                }}
                            >
                                Status : {this.props.status}
                            </Text>
                            <Icon
                                name={this.get_icon(this.props.status)}
                                type="ionicon"
                                color={this.get_color(this.props.status)}
                                containerStyle={{ marginLeft: scale(5) }}
                            />
                        </View>
                    </View>
                </View>
            </TouchableOpacity>
        )
    }
}
export default CrossingCell

Answer 1

It is because somewhere (I suppose in the text of your custom component) you are rendering a map where your JSX expect a string.

Please, make sure your props.stop_status is not an object and just a string. If it is a string you will have to check all the variables you are including on your JSX.