I have the following CustomInput ponent:

import React from 'react';

const CustomInput = 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>
);

CustomInput.propTypes = {
  inputType: React.PropTypes.oneOf(['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 CustomInput;

And this is my form:

import React, { PropTypes } from 'react';
import { Field, reduxForm } from 'redux-form';
import CustomInput from '../ponents/CustomInput';

const renderMyStrangeInput = field => (
  <CustomInput
    inputType={'number'}
    title={'How many items do you currently own?'}
    name={'currentItems'}
    controlFunc={param => field.input.onChange(param.val)}
    content={{ val: field.input.value }}
    placeholder={'Number of items'}
  />
);

class ItemsForm extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <form className="container" onSubmit={handleSubmit}>
        <h1>Nuevo Pedido</h1>
        <Field name="myField" ponent={renderMyStrangeInput} />
        <div className="form-group">
          <button type="submit" className="btn btn-primary input-group-btn">Submit</button>
        </div>
      </form>
    );
  }
}

ItemsForm.propTypes = {
};

ItemsForm = reduxForm({
  form: 'Items',
})(ItemsForm);

export default ItemsForm;

I can render my ponent, but there are some issues with the content type. First, if I set the CustomInput to accepts numbers I get:

he specified value "[object Object]" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?

Second, if I set the inputType to text, it renders a:

[object Object]

so, the console is giving the following warning:

Warning: Failed prop type: Invalid prop `content` supplied to `CustomInput`.

How can I set the content properly?

I have the following CustomInput ponent:

import React from 'react';

const CustomInput = 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>
);

CustomInput.propTypes = {
  inputType: React.PropTypes.oneOf(['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 CustomInput;

And this is my form:

import React, { PropTypes } from 'react';
import { Field, reduxForm } from 'redux-form';
import CustomInput from '../ponents/CustomInput';

const renderMyStrangeInput = field => (
  <CustomInput
    inputType={'number'}
    title={'How many items do you currently own?'}
    name={'currentItems'}
    controlFunc={param => field.input.onChange(param.val)}
    content={{ val: field.input.value }}
    placeholder={'Number of items'}
  />
);

class ItemsForm extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <form className="container" onSubmit={handleSubmit}>
        <h1>Nuevo Pedido</h1>
        <Field name="myField" ponent={renderMyStrangeInput} />
        <div className="form-group">
          <button type="submit" className="btn btn-primary input-group-btn">Submit</button>
        </div>
      </form>
    );
  }
}

ItemsForm.propTypes = {
};

ItemsForm = reduxForm({
  form: 'Items',
})(ItemsForm);

export default ItemsForm;

I can render my ponent, but there are some issues with the content type. First, if I set the CustomInput to accepts numbers I get:

he specified value "[object Object]" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)?

Second, if I set the inputType to text, it renders a:

[object Object]

so, the console is giving the following warning:

Warning: Failed prop type: Invalid prop `content` supplied to `CustomInput`.

How can I set the content properly?

• javascript
• reactjs
• redux
• redux-form

2 Answers 2

I think the issue is that you are trying pass strings as objects

<CustomInput
    inputType="number"
    title="How many items do you currently own?"
    name="currentItems"
    controlFunc={param => field.input.onChange(param.val)}
    content={field.input.value}
    placeholder="Number of items"
  />

You are passing object via props and you must pass string or number.

content={{ val: field.input.value }} // no!
content={field.input.value} // yes! :)