React.PropTypes is deprecated since React 15.5.0

Question

I am facing an issue where I am trying to import a static component and use it in the parent component. I am getting React undefined error.

Here what I have done Parent Component

import React from 'react';
import TableHeader from 'TableHeader';
import TableRow from 'TableRow';
import UTIL from '../../services/Utils';

export default class Table extends React.Component {

    render() {
        return (<div>
            <TableHeader labels={this.props.labels}/>
            <div className="table-body js-filtered-data-wrapper sortable">
                {this.renderTableRows()}
            </div>

        </div>
        )
    }
    renderTableRows() {
        return this.props.teamlist.map((listItem, i) => {
            return (
                <TableRow key={i}
                               data={listItem}
                               labels={this.props.labels}
                />
            )
        });
    }
}

in my TableHeader file the code is

import { PropTypes } from 'react';

const TableHeader = (props) => {
    let labels = props.labels;
    return (
        <ul className="table-header">
            <li className="table-row header ">
                <div className="player-name">{labels.playername}</div>
            </li>
        </ul>
    )
}

TableHeader.propTypes = {
    labels : PropTypes.object.isRequired
}

export default TableHeader;

The error I am getting is

Uncaught ReferenceError: React is not defined
    at TableHeader (webpack:///./src/components/pro-am/TableHeader.jsx?:13)

Possible duplicate of [Uncaught ReferenceError: React is not defined](http://stackoverflow.com/questions/35341994/uncaught-referenceerror-react-is-not-defined) (TL;DR - any file with JSX in it needs to `import React from "react"`) — Joe Clay, May 19 '17 at 13:11

Shubham Khatri · Accepted Answer · 2017-05-19T13:16:55.340

1

Imoprt React in the TableHeader component too:

NOTE: With the latest version of React the PropTypes have been moved to a Separate package(prop-types). So import it from there like

import React,{ PropTypes } from 'react';

const TableHeader = (props) => {
    let labels = props.labels;
    return (
        <ul className="table-header">
            <li className="table-row header ">
                <div className="player-name">{labels.playername}</div>
            </li>
        </ul>
    )
}

TableHeader.propTypes = {
    labels : PropTypes.object.isRequired
}

export default TableHeader;

If using v15.5.0 or above use PropTypes from a separate package

import React from 'react';
import PropTypes from 'prop-types';

const TableHeader = (props) => {
    let labels = props.labels;
    return (
        <ul className="table-header">
            <li className="table-row header ">
                <div className="player-name">{labels.playername}</div>
            </li>
        </ul>
    )
}

TableHeader.propTypes = {
    labels : PropTypes.object.isRequired
}

export default TableHeader;

edited May 19 '17 at 13:16

answered May 19 '17 at 13:12

Shubham Khatri

270,417
55
406
400

It will not help as this will generate this error 'Cannot read property 'createElement' of undefined' – Rohit Choudhary May 19 '17 at 13:14
I will help, try it – Shubham Khatri May 19 '17 at 13:15
I am not using the latest version so thats fine. I guess – Rohit Choudhary May 19 '17 at 13:16
Yes that will be ok, just added that as a NOTE – Shubham Khatri May 19 '17 at 13:16
Glad to have helped, however I agree with you sometimes React will give not so helpful warnings – Shubham Khatri May 19 '17 at 13:19
Wait for 4 mins :P – Rohit Choudhary May 19 '17 at 13:21
Yes, SO rules :) – Shubham Khatri May 19 '17 at 13:26

React.PropTypes is deprecated since React 15.5.0

1 Answers1

Linked