title: How to pass props to custom components in react-select
body: <p>I am trying to use a custom component as an input field in react-select. Since I need validation I am trying to use HTML5 <code>oninvalid</code> (<code>onInvalid</code> in JSX) for my input tag and set the custom message for <code>oninvalid</code>. However I am unable to pass the message as a prop to the component that I am setting in select. Below is my code.</p>
  
  <p>Input.js</p>
  
  <pre><code>import React from "react";
  import { components } from "react-select";
  
  export default class Input extends React.Component {
    constructor(props) {
      super(props);
    }
  
    componentDidMount() {
      console.log("component mounted");
    }
    setInvalidMessage = event =&gt; {
      event.target.setCustomValidity("Custom Message");
    };
  
    render() {
      if (this.props.isHidden) {
        return &lt;components.Input {...this.props} /&gt;;
      }
      return (
        &lt;components.Input
          {...this.props}
          required
          onInvalid={this.setInvalidMessage}
        /&gt;
      );
    }
  }
  </code></pre>
  
  <p>example.js</p>
  
  <pre><code>import React from "react";
  import Input from "./Input";
  import Select from "react-select";
  import { colourOptions } from "./docs/data";
  
  const InputBoxWithText = props =&gt; {
    return &lt;Input {...props} /&gt;;
  };
  
  export default () =&gt; (
    &lt;form&gt;
      &lt;Select
        closeMenuOnSelect={true}
        components={{ InputBoxWithText }}
        options={colourOptions}
      /&gt;
      &lt;input type="submit" /&gt;
    &lt;/form&gt;
  );
  </code></pre>
  
  <p>If I pass Input in components attribute I get the hard coded message in Input.js. If I pass InputBoxWithText I don't see Input mounting at all.</p>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import Example from './example';
  
  ReactDOM.render(
  &lt;Example /&gt;,
  document.getElementById('root')
  );
  </code></pre>
  
  <p>Here is <a href="https://codesandbox.io/s/5y555yk2xl" rel="noreferrer">CodeSandBox.io URL</a>.</p>
  
  <p>Can any one let me know if what am I doing wrong.</p>