Define component as constant

component in reactjs
react component
react function component
react constants
react native component constant
react extends component
react component types
react declare props

Im following a React Native course and at some point the teacher defines a component as constnat using the following code:

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

However I dont manage to make it work. I made a snack to just try the component individually and it doesnt work: https://snack.expo.io/S1eKSeV-7

I always get the error Invariant Violation: element type is invalid.

What Im doing wrong?


You are not exporting your component. That is why you get the error because Comment component is undefined.

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

const Comment = (props) =>
  <Text>{props.comment.text}</Text>

export default Comment

React: Class Component vs Functional Component, Most of new react developers usually ask this question: what is the difference and which one should I use? A functional(a.k.a. stateless) component is just a plain javascript const MyStatelessComponent = props => React. Definition of constant (Entry 2 of 2) : something invariable or unchanging: such as. a : a number that has a fixed value in a given situation or universally or that is characteristic of some substance or instrument. b : a number that is assumed not to change value in a given mathematical discussion.


This is a functional component. There are two type of components in React: Functional and class components. If you don't need any state or don't use any lifecycle methods in your component you can and should use functional components.

Functional components

const SomeComponent = () => <div>Something</div>;

No need to use an explicit return here since arrow function do this for us if there is one single statement.

With regular function:

function SomeComponent() { return <div>Something</div> };

Class components

class SomeComponent extends React.Component {
    state = { foo: "bar" };
    someLifeCycleMethod() {
       ....
    }
    render() {
        return( <div>Something</div>);
    }
}

When you don't understand something always refer to official documentation.

The problem you are having is not directly related to component type. As suggested in another answer your component probably is not exported.

Functional vs Class-Components in React - David Jöch, which takes props as an argument and returns a react element. It has a state, lifecycle hooks and it is a javascript class which means that React creates instances of it. However defining a member in the component class works: some.component.ts. public const constant = C0NST; some.component.html {{ constant }} <!-- constant --> I don't understand why I was able to access the imported constant directly in the service class but not in the component template even though I imported it in the component class.


This will work:

const Comment = (props) => {
  return (
    <Text>{props.text}</Text>
  );
};

Understanding React Components - The Andela Way, What is the difference between functional component and class component? Breaking out your constants is an amazing way to make your project clearer to those reading through your code, while simultaneously cutting down on unneeded repetition of constants from component


React Functional or Class Components: Everything you need to , element that describes how a section of the UI (User Interface) should appear. Defined constants in arduino don’t take up any program memory space on the chip. The compiler will replace references to these constants with the defined value at compile time. This can have some unwanted side effects though, if for example, a constant name that had been #defined is included in some other constant or variable name.


How to Add a Constants File to Your React Project, are easier to read, debug, and test. They offer performance benefits, decreased coupling, and greater reusability. The ability to define constant data which is accessible in templates/code the same way as data defined in 'data'. In the moment constant data needs to made available via "data". While it's possible to freeze objects, it looks ugly and uses a certain implementation which may change in the future.


React Components, Elements, and Instances – React Blog, Once I've gotten all of my constants uniquely defined in index.js, I go ahead and Regardless of how you like to import your constants into your components,  Illustrated definition of Constant: A fixed value. In Algebra, a constant is a number on its own, or sometimes a letter such as a, b or c to stand