Pass props to valueComponent

[mehrdad-shokri]

in my Select component I have sth like:

<Select
valueComponent={GravatarValue}
                            />

My problem is that I can't pass props to GravatarValue. how can I do that?

[bvaughn]

You could use an approach like this:

function createGravatarValue (yourProps) {
  return function GravatarValueWrapper (selectProps) {
    // Has access to all your custom props (yourProps)
    // As well as those provided by Select (selectProps)
    return (
      <GravatarValue
        {...yourProps}
        {...selectProps}
      />
    )
  }
}

function createSelect (selectProps) {
  const GravatarValueWrapper = createGravatarValue({
    // Whatever props you want to pass outside of Select
  })

  return (
    <Select
      {...selectProps}
      valueComponent={GravatarValueWrapper}
    />
  )
}

[bvaughn]

Essentially, wrap the props you want to pass (outside of Select) up in a closure and then stitch them together with props from Select and pass both along to GravatarValue (or whatever value renderer you're using).

Cheers!