Why is React.Fragment causing the console error: Results Warning: React.createElement: type is invalid

Question

I have the following:

const MyField = class extends React.Component {
...
  renderField = (reduxFormFieldProps) => (
    <React.Fragment>
      <Form.Input />
      {!reduxFormFieldProps.meta.submitFailed ? null :
      <Form.Error />
      }
    </React.Fragment>
  )
  render = () => (
    <ReduxFormField
      type="text"
      component={this.renderField}
    />
  );
};

This is causing the error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

However, if I change <React.Fragment>s to <div>s it works fine... What am I doing wrong here with React.Fragment?

Answer 1

The answer is really simple.

Since <React.Fragment> is used for wrapping up components and elements without creating any new DOM node when returning.

The attribute 'component' of ReduxFormField requires one single DOM node but function 'renderField' actually returns 2 elements which causes problems here.