What is type in React?

Question

Well, I saw this code snippet that's down below and I'd like to know what type Props really is? Is it related to flow? Or is it related to prop-types?

How do I use it in a component that's defined as a class?

I saw it in the React-Router example found here: https://atlaskit.atlassian.com/packages/core/navigation

The code snippet:

// @flow
import React from "react";
import { AtlassianIcon } from "@atlaskit/logo";
import Lorem from "react-lorem-component";
import Page from "@atlaskit/page";
import Navigation, { AkContainerTitle } from "@atlaskit/navigation";
import RouterLinkComponent from "./RouterLinkComponent";
import RouterLinkItem from "./RouterLinkItem";

// @flow

type Props = {
  title: string,
  currentPath: string
};

const PageNavigation = ({ title, currentPath }: Props) => (
  <Page
    navigation={
      <Navigation
        containerHeaderComponent={() => (
          <AkContainerTitle
            href="/iframe.html"
            icon={<AtlassianIcon label="atlassian" />}
            linkComponent={RouterLinkComponent}
            text="Dashboard"
          />
        )}
        globalPrimaryIcon={<AtlassianIcon label="Home" size="small" />}
        globalPrimaryItemHref="/iframe.html"
        linkComponent={RouterLinkComponent}
      >
        <RouterLinkItem
          text="Page 1"
          to="/page1"
          isSelected={currentPath === "/page1"}
        />
        <RouterLinkItem
          text="Page 2"
          to="/page2"
          isSelected={currentPath === "/page2"}
        />
        <RouterLinkItem
          text="Page 3"
          to="/page3"
          isSelected={currentPath === "/page3"}
        />
        <RouterLinkItem
          text="Page 4"
          to="/page4"
          isSelected={currentPath === "/page4"}
        />
      </Navigation>
    }
  >
    <div>
      <h1>{title}</h1>
      <Lorem count="30" />
    </div>
  </Page>
);

export default PageNavigation;

It’s related to prop types. You define a data type to the each property you receive or you send whatever in react — Hemadri Dasari, Oct 12 '18 at 14:22

score 6 · Accepted Answer · answered Oct 12 '18 at 14:24

6

It's part of the flow type checker. See the docs: Type Aliases

If it was PropTypes then it would look like this:

PageNavigation.propTypes = {
  title: string,
  currentPath: string
};

answered Oct 12 '18 at 14:24

Sven van Zoelen

6,989
5
37
48

score 0 · Answer 2 · answered Oct 12 '18 at 15:00

Here is a useful list of prop-types

ComponentName.propTypes = {
  someVariablePropNameA: PropTypes.string.isRequired,
  someVariablePropNameB: PropTypes.object.isRequired,
  someVariablePropNameC: PropTypes.arrayOf(PropTypes.object).isRequired,
  someVariablePropNameD: PropTypes.number,
  someVariablePropNameE: PropTypes.bool
};

These are the expected props data types which are expected to be inside the component, usually passed into the component. Failed prop-types shouldn't break component but will show error, warning you they failed... We usually view this in our console log...

In addition, you can have default prop types like so

MatchRating.defaultProps = {
  someVariablePropNameA: "",
  someVariablePropNameB: {},
  someVariablePropNameC: [{}],
  someVariablePropNameD: 0,
  someVariablePropNameE: false
};

You need to include this package in your header like so

import PropTypes from "prop-types";

This is just a little means of testing for bugs. Should always be used.

Now for a full example

import React, { PureComponent } from "react";
import PropTypes from "prop-types";

class ComponentName extends PureComponent {
}

ComponentName.propTypes = {

};

ComponentName.defaultProps = {

};

export default ComponentName;

Hope this helps

What is type in React?

2 Answers2