question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[2.0.0-beta.2] Components Option render function issue with innerProps

See original GitHub issue

While overwriting the Option component I found issue with passing innerProps to the div. Documentation example says:

import React from 'react';
import Select from 'react-select';

const CustomOption = ({ innerProps, isDisabled }) =>
!isDisabled ? (
    <div {...innerProps}>// your component internals</div>
) : null;

class Component extends React.Component {
    render() {
        return <Select components={{ Option: CustomOption }} />;
    }
}

But when passing innerProps, I’m getting warning:

React does not recognize the innerRef prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase innerref instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Code to reproduce:

const optionRenderer = props => {
    return (
        <div {...props.innerProps}>
            {props.data.label}
        </div>
    );
};

render() {
    return (
        <Select
          placeholder="Select language"
          defaultValue={{ value: "EN", label: "English" }}
          options={[
            { value: "GB", label: "English" },
            { value: "RU", label: "Russian"}
          ]}
          components={{
            Option: optionRenderer
          }}
      />
   );
}

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:5

github_iconTop GitHub Comments

2reactions
alexanderwallincommented, Jun 4, 2018

I’m getting this error using <Async /> in 2.0.0-beta.6, where innerRef is undefined.

0reactions
kgwebsitescommented, Aug 7, 2018

The error seems to go away with 2.0.0-beta.7

Read more comments on GitHub >

github_iconTop Results From Across the Web

Render Props - React
Render Props. The term “render prop” refers to a technique for sharing code between React components using a prop whose value is a...
Read more >
Components - React Select
A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and ajax support.
Read more >
Releases - styled-components
We are planning to release 5.2 on September 2/3, please help us test! yarn add styled-components@test. Preallocate global style placement to ensure cGS...
Read more >
React-Select - Replacing Components for custom option content
I would like to have custom designed (select) options. The documentation suggests that Replacing Components would be a method that I could use ......
Read more >
Vue.js functional components: What, Why, and When?
Using Vue's functional components can increase rendering ... injections : (v2.3.0+) if using the inject option, this will contain resolved ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found