How to use the react.PropTypes.string function in react

import { gql, graphql } from 'react-apollo';
import Link from 'next/link';
import { PropTypes, Component } from 'react';
import Auth0Lock from 'auth0-lock';

import { setAuthToken } from '../lib/authTokens';

class Header extends Component { // eslint-disable-line react/prefer-stateless-function
  static propTypes = {
    pathname: PropTypes.string.isRequired,
    currentUser: PropTypes.shape({
      screenName: PropTypes.string.isRequired,
    }),
    signinUser: PropTypes.func.isRequired,
    createUser: PropTypes.func.isRequired,
  };

  static defaultProps = {
    currentUser: null,
  };

  componentDidMount() {
    const lock = new Auth0Lock(process.env.AUTH0_CLIENT_ID, process.env.AUTH0_DOMAIN, {
      auth: {
        redirectUrl: `${location.origin}/login?r=${this.props.pathname}`,
        responseType: 'token',
      },
    });

BorderRadius: '0'
  },
  huge: {
    padding: '35px 10px',
    fontSize: '2.5em',
    whiteSpace: 'normal'
  },
  hugeSmallerFont: {
    padding: '35px 10px',
    fontSize: '2.0em',
    whiteSpace: 'normal'
  }
}

Button.propTypes = {
  children: PropTypes.string.isRequired,
  type: PropTypes.string,
  onClick: PropTypes.any,
  // Override the inline-styles of the root element
  style: PropTypes.object,
}

Button.defaultProps = {
  disabled: false,
  labelPosition: 'after',
  fullWidth: false,
  type: 'button',
  primary: false,
  secondary: false
}

export default Button;

import classNames from 'classnames';

/**
 * Internal dependencies
 */
import TermTreeSelectorTerms from './terms';

export default React.createClass( {
	displayName: 'TermTreeSelector',

	propTypes: {
		multiple: PropTypes.bool,
		className: PropTypes.string,
		onChange: PropTypes.func.isRequired,
		selected: PropTypes.array,
		createLink: PropTypes.string,
		analyticsPrefix: PropTypes.string,
		taxonomy: PropTypes.string
	},

	getDefaultProps() {
		return {
			analyticsPrefix: 'Category Selector',
			selected: [],
			taxonomy: 'category',
			onChange: () => {}
		};
	},

	getInitialState() {
		return {
			search: ''

className="small destructive"
            onClick={deleteMessage}
          >
            Delete
          
        }
      
    
  
);

Message.propTypes = {
  belongsToCurrentUser: PropTypes.bool,
  content: PropTypes.string,
  deleteMessage: PropTypes.func,
  id: PropTypes.string,
  timeStamp: PropTypes.number,
  user: PropTypes.object,
};

export default Message;

import Wrap from './Wrap';
import ComponentTitle from './ComponentTitle';
import DemoGroup from './DemoGroup';

const DemoPage = ({ title, subtitle, demoGroups, children }) => (
  
    
    {demoGroups.map(({ label, demos }, i) => (
      
    ))}
    {children}
  
);

DemoPage.propTypes = {
  title: PropTypes.string,
  subtitle: PropTypes.string,
  demoGroups: PropTypes.array,
  children: PropTypes.node,
};

export default DemoPage;

import fs from 'fs'
import path from 'path'
import React, {Component, PropTypes} from 'react'
import {RetinaImg, Flexbox} from 'nylas-component-kit'
import {Actions, FileDownloadStore} from 'nylas-exports'


class AttachmentComponent extends Component {
  static displayName = 'AttachmentComponent';

  static propTypes = {
    file: PropTypes.object.isRequired,
    download: PropTypes.object,
    removable: PropTypes.bool,
    targetPath: PropTypes.string,
    messageClientId: PropTypes.string,
  };

  static containerRequired = false;

  constructor() {
    super()
    this.state = {progressPercent: 0}
  }

  _isDownloading() {
    const {download} = this.props
    const state = download ? download.state : null
    return state === 'downloading'
  }

  _canClickToView() {

checked={inlineChecked}
      onChange={onInlineChange}
    />
    
  
);

Configuration.propTypes = {
  sorted: PropTypes.string.isRequired,
  onSortChange: PropTypes.func.isRequired,
  dialogChecked: PropTypes.bool.isRequired,
  onDialogChange: PropTypes.func.isRequired,
  inlineChecked: PropTypes.bool.isRequired,
  onInlineChange: PropTypes.func.isRequired,
  saveChecked: PropTypes.bool.isRequired,
  onSaveChange: PropTypes.func.isRequired,
};

export default Configuration;

submitting: PropTypes.bool,
    showLabels: PropTypes.bool,
    initializeForm: PropTypes.func.isRequired,
    //Automation id's
    automation: PropTypes.shape({
      emailInput: PropTypes.string,
      passwordInput: PropTypes.string,
      newsletterCheckbox: PropTypes.string,
      submitBtn: PropTypes.string,
      signInBtn: PropTypes.string,
      passwordShowBtn: PropTypes.string,
      passwordHideBtn: PropTypes.string
    }),
    //Teleaf
    tealeaf: PropTypes.shape({
      emailInput: PropTypes.string,
      passwordInput: PropTypes.string,
      newsletterCheckbox: PropTypes.string,
      submitBtn: PropTypes.string,
      passwordShowBtn: PropTypes.string,
      passwordHideBtn: PropTypes.string
    }),
    headingElement: PropTypes.oneOfType([PropTypes.string, PropTypes.func])
  },

  getInitialState() {
    return {
      value: this.props.defaultEmail || ""
    };
  },

  getDefaultProps() {