Can't seem to use null as a default value?

I have a custom input component that declares:

Component.propTypes = {
  value: PropTypes.number
};

Because mobx-react-form defaults the value to an empty string, I’m getting proptype errors in the console. So, I figured I could override the default value and set it to null, but an empty string still seems to be getting passed in. I tried default: null, initial: null, and value: null, but nothing worked.

I’ve tried looking for documentation about default values, but I couldn’t seem to find much of anything. Sorry for asking questions in the issue tracker 😄 .

At the risk of more configuration boilerplate, do you think it would it be best for users to provide their own default values instead of assuming an empty string?

[jkeruzec]

For the record, I make it work with this :

simulationDate: {
                    label: 'Simulation date',
                    placeholder: 'Simulation date'+ '..',
                    rules: 'required|date',
                    value:'',
                    input: value => value === '' ? null : value, 
                    output: value => value === '' ? null : value
                }

[rzane]

So in the case of <input />, it can’t be null. But, in the case of a custom input component, null is actually very common I think. <ReactSelect />, for example, can be null.

Input components really just need to follow the contract of value/onChange. They might invoke onChange with an array or an object. You wouldn’t want the initial value of an input that calls onChange with an object to take an empty string as an initial value. Therefore, null makes the most sense.

This is a contrived example, but imagine you have a custom input component that knows how to manage objects with a certain structure.

class DistanceInput extends Component {
  static propTypes = {
    onChange: PropTypes.func.isRequired,
    value: PropTypes.shape({
      distance: PropTypes.number.isRequired
    }),
  };

  handleChange = (event) => {
    const { value } = event.target;

    if (value) {
      this.props.onChange({
        distance: parseInt(event.target.value, 10)
      });
    } else {
      this.props.onChange(null);
    }
  }

  render () {
    return (
      <input
        type='number'
        value={this.props.value ? this.props.value.distance : 999}
        onChange={this.handleChange}
      />
    );
  }
}

Create the form:

class FormState extends MobxReactForm {}

// normally, this would be passed as a prop, but for time saving...
const form = new FormState({
  fields: [{
    name: 'distance',
    label: 'Distance'
  }]
};

class Form extends Component {
  render() {
    const distance = form.$('distance');

    return (
      <form onSubmit={form.submit}>
        <DistanceInput
          value={distance.value}
          onChange={distance.onChange}
        />
      </form>
    );
  }
}

This will trigger a propType error, because the distance input expects null or an object.