Integrate React-Semantic-UI and redux-form

Question

I'm using redux-form (awesome libs) to handle my form & redux store in React app. Everything works well, important forms and nested json output.

I'm trying to use React-Semantic-UI Component with redux-form. I searched inside the docs how about integrate custom component with redux form, and here we go : http://redux-form.com/6.5.0/docs/faq/CustomComponent.md/ Seems perfect.

But when i integrate Semantic and this, it doenst work.

This is my simple test with pseudo code :

const TestComponent = props => (
<Form>
     <Field name="dropdownTest" component={ TestSelect } />
</Form>
)

and here my CustomComponent using Dropdown. You can found the dropdown documentation & props (onChange & value ) here :

http://react.semantic-ui.com/modules/dropdown

import Form , Dropdown from 'semantic-ui-react'
import {myOption from './myOption'

const TestSelect = field = (
   <Form.Field>
            <label> Test dropdown </label>
             <Dropdown option={myOption} selection 
                                   value={{val : field.input.value}}
                                   onChange={ param => field.input.onChange(param.val)} />
     </Form.Field>
)

As in the documentation, I added value & onChange props on my Custom Component.

I clearly miss something here. Is someone have simple example with redux-form and semantc ui ?

Thanks for helping.

Answer 1

Ok I succed :

To use React Semantic Dropdown, this is a simple example :

const TestComponent = props => (
<Form>
     <Field name="dropdownName" component={ DropdownFormField}
            label="Dropdown Test" 
      />

</Form>
)



const DropdownFormField = props => (
 <Form.Field>
   <Dropdown selection {...props.input}
             value={props.input.value}
             onChange={(param,data) => props.input.onChange(data.value)}
             placeholder={props.label} 
    />
  </Form.Field>
)

And everything is working great. You can do same with Semantic and any components.

Hope that somebody found this usefull.