React Native Moment Error: Expected a component class, got [object Object]

React Native Moment Error: Expected a component class, got [object Object]
0

#1

I’m creating my first non-tutorial React Native app, and I want to use Moment to format dates in React Native.

My App.js looks like this:

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Moment from 'react-moment';


export default class App extends React.Component {
  render() {
    let now = new Date();
    return (
      <View style={styles.container}>
        <Moment format="dddd">{now}</Moment>
        <Moment format='MMMM Do YYYY'>{now}</Moment>
        <Text>Today at a Glance</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

and when I run the app on my iPhone with the Expo app, I get the error Expected a component class, got [object Object].

I read at least eight StackOverflow posts, did a Google search, searched YouTube, and posted to StackOverflow but received no responses.

I want the first Moment to display the current day of the week, and the other Moment to display a date like October 9th, 2017.

What should I do instead?


#2

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#3

Thank you Randell for editing my post for readability and showing me how to do so in the future


#4

I resolved the issue when I changed my render function to the below:

    let now = new Date();

    return (
      <View style={styles.container}>
        <Moment element={Text} format="dddd">{now}</Moment>
        <Moment element={Text} format='MMMM Do YYYY'>{now}</Moment>
        <Text>Today at a Glance</Text>
      </View>
    );
  }```