DRY jsx render method

Question

I wonder if it is a better way to DRY this code, have you guys any ideas? The props are the same, just the component change...

render() {
    const { input: { value, onChange }, callback, async, ...rest } = this.props;

    if (async) {
      return (
        <Select.Async
          onChange={(val) => {
            onChange(val);
            callback(val);
          }}
          value={value}
          {...rest}
        />
      );
    }

    return (
      <Select
        onChange={(val) => {
          onChange(val);
          callback(val);
        }}
        value={value}
        {...rest}
      />
    );
  }

Answer 1

With:

let createElement = function(Component) {
    return (
        <Component onChange={(val) => { 
            onChange(val);
            callback(val);
            }}
            value={value}
        {...rest}
      />
    );
};

you can do

let selectAsync = createElement(Select.Async);
let select = createElement(Select);

You can render them in the jsx part with {{select}} and {{selectAsync}}

PS: I didnt test this directly, but did something very similar a few days ago, so this approach should work. Note that Component must start with a capital letter.