CODEWITHSUNDEEP
javascriptnode.jsreactjspropreact-proptypes
Mark
Mark

Reputation: 1872

PropType error in React form input type

I am building a form with react.js and having an issue I cannot seem to resolve. Am using the npm module prop-types for my props within the form and trying to set an inputType for a single input. I keep getting the following error:

enter image description here

My code for this is:

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

const SingleInput = (props) => (
    <div className="form-group">
        <label className="form-label">{props.title}</label>
        <input
            className="form-input"
            name={props.name}
            type={props.inputType}
            value={props.content}
            onChange={props.controlFunc}
            placeholder={props.placeholder} />
    </div>
);



SingleInput.propTypes = {
    inputType: React.PropTypes.oneOfType(['text', 'number']).isRequired,
    title: React.PropTypes.string.isRequired,
    name: React.PropTypes.string.isRequired,
    controlFunc: React.PropTypes.func.isRequired,
    content: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number,
    ]).isRequired,
    placeholder: React.PropTypes.string,
};

export default SingleInput;

I have switched between using oneOf and then oneOfType, but get the same results either way. Is there something further I should do?

Thanks much.

Upvotes: 1

Views: 2978

Answers (2)

Kathrin Holzmann
Kathrin Holzmann

Reputation: 21

oneOfType means that you expect the variable to be one of a specific prop-type, while oneOf can be any self choosen value. Here an example how both would look like.

Game.propTypes = {      
  gameStatus: PropTypes.oneOf(['new_game', 'playing', 'finished']).isRequired,
  roundsToPlay: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
}

I came here because i had a problem with a <input type="number" /> element. I wanted to have the value as props, but every time the user would remove default value to type in a new one i would get a warning from prop-types. As the value is now an empty string instead of any given number. The solution is to set the prop-type with oneOfTypes to accept string and number.

I hope i could help someone with this additional information with the same problem on number inputs.

Upvotes: 2

yuantonito
yuantonito

Reputation: 1282

I believe you use React v16 ? You can read in their release note that they removed PropTypes from their react package.

The deprecations introduced in 15.x have been removed from the core package. React.createClass is now available as create-react-class, React.PropTypes as prop-types, React.DOM as react-dom-factories, react-addons-test-utils as react-dom/test-utils, and shallow renderer as react-test-renderer/shallow

You should directly use the prop-types library:

SingleInput.propTypes = {
    inputType: PropTypes.oneOfType(['text', 'number']).isRequired,
    title: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    controlFunc: PropTypes.func.isRequired,
    content: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
    ]).isRequired,
    placeholder: PropTypes.string,
};

Upvotes: 6

Related Questions