如果我在react-select中使用optionsRenderer，如何使用valueComponent属性来渲染所选项目

Question

Say I have my react-select component with the following props. I am using pug syntax.

What works

My dropdown displays every option correctly with all options custom rendered using the optionsRenderer prop...

What I get(as expected)

However the results I get are that the input value is just a text I have referenced in my option.label field. In the first option, Custom is my label key.

What I want to achieve

use the valueComponent to display exactly what the same HTML that options renderer is displaying inside the options dropdown.

Like this, styling can be improved of course :)

...

const customOption = (option) => pug`
  div
    strong #{option.label}
    p #{option.renderMethod}

  div
   strong $#{option.otherHTMLData}
`

The function below is expected by the optionRenderer props and iterates on the options supplied.

 const customOption = (option) => pug` div strong #{option.label} p #{option.renderMethod} div strong $#{option.otherHTMLData} ` 

But valueComponent only expects 1 static component. Therefore any function like () => <span>Will show this</span>

How do I get the option that is selected to be used as the input value using valueComponent ?

Answer 1

The label displayed by the ValueContainer depends on isMutli . If isMulti is false, you control this display by overriding the SingleValue component. If isMulti is true, you control this display by overriding the MultiValue component (more specifically, it's MultiValueLabel component).

See the Components documentation for some simple examples.