Using Redux Form with Semantic UI

Question

I'm trying to figure out where I should put my spread operator inside of my Semantic UI form.

<div class="ui selection dropdown">
  <input type="hidden" name="gender">
  <i class="dropdown icon"></i>
  <div class="default text">Gender</div>
  <div class="menu" {...gender}>
    <div class="item" data-value="0">Male</div>
    <div class="item" data-value="1">Female</div>
  </div>
</div>


function validate(values) {
  const errors = {};

  console.log(values.gender);
}

Currently you can see I have my spread operator, {...gender}, in the div with class menu. When I select from the dropdown box it willlog undefined.

Anyone have an idea?

Where are the inputs? There is no onChange property on div. — Florent
– Florent, Commented May 26, 2016 at 14:49
I'm not sure what you mean... the html I took directly from one of their examples. Here is a link to their docs semantic-ui.com/modules/dropdown.html This is a dropdown field and I want to capture the user's selection. — user2465134
– user2465134, Commented May 26, 2016 at 14:57

user2465134 · Accepted Answer · 2016-06-09 16:26:17Z

1

I had to learn a little bit more about Semantic CSS classes. Here is the code that creates a nice dropdown using Redux Form

<div className="field">
  <select className="ui dropdown input" {...options}>
    <option value="">This is the header side the input</option>
    <option value="1">Option 1</option>
    <option value="0">Option 2</option>
    <option value="2">Option 3</option>
  </select>
</div>

If you don't give the option a value it will see it as your header/title. IT will not be an option and will disappear once the user makes a choice. The {...option} is used for Redux Router's validation.

answered Jun 9, 2016 at 16:26

user2465134

9,9315 gold badges35 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using Redux Form with Semantic UI

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related