Error recomposing Input components for admin-on-rest

Question

I'm using one of admin on rest's input components. And I have a form which looks like this:

<FormTab label="Identity">
    ...
    ...
    <SelectInput
        source="status"
        choices={[
            { id: 'draft', name: 'Draft' },
            { id: 'official', name: 'Official' }
        ]} />
</FormTab>

Which works fine. But I want to DRY up my code because I use this specific <SelectInput> configuration in a few places. So I created a new component which looks like this:

export class StatusInput extends Component { 
    render() {
        return (
            <SelectInput {...this.props}
               source="status"
               choices={[
                { id: 'draft', name: 'Draft' },
                { id: 'official', name: 'Official' }
               ]}
            />
        );
    }   
}

But when I go to replace the original code with my new component like so:

<FormTab label="Identity">
    ...
    ...
    <StatusInput />
</FormTab>

I receive an error: Uncaught TypeError: Cannot read property 'value' of undefined inside the SelectInput component that I'm recomposing where a prop ("input"), that is normally defined, is now undefined in my recomposed component. I'm new to react so I'm assuming that there is some nuance I'm not understanding. But my question is:

1. Isn't the original way, and the new way (recomposing) logically equivalent? I don't understand what props are being passed into SelectInput, that I'm not in turn passing through my recomposed component. Why one works and the other doesn't is confounding me.

2. If this isn't the appropriate way to extend SelectInput what are my other options?

Answer 1

I have answered #2 part of my question after I found this in the documentation As this appears to be the correct way to create (however, not recompose) a admin-on-rest compatible input field. Except it doesn't work the way they describe in the documentation.

So I stumbled on this https://redux-form.com/7.2.3/examples/material-ui/ and this is what I came up with as a component.

import React from 'react';
import SelectField from 'material-ui/SelectField';
import MenuItem from 'material-ui/MenuItem';
import { Field } from 'redux-form';

const renderSelectField = ({
  input,
  label,
  meta: { touched, error },
  children,
  ...custom
}) => (
  <SelectField
    floatingLabelText={label}
    errorText={touched && error}
    {...input}
    onChange={(event, index, value) => input.onChange(value)}
    children={children}
    {...custom}
  />
)

const StatusInput = ({ source }) => (
    <Field
          name={source}
          component={renderSelectField}
          label="Status"
        >
        <MenuItem value="official" primaryText="Official" />
        <MenuItem value="draft" primaryText="Draft" />
    </Field>
);
export default StatusInput;

Which does work as a child inside the FormTab component. I'm still confused as to why the recomposing didn't work.