CODEWITHSUNDEEP
reactjsreduxsemantic-uiredux-form
user2465134
user2465134

Reputation: 9753

Using Redux Form with Semantic UI

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?

Upvotes: 3

Views: 1233

Answers (1)

user2465134
user2465134

Reputation: 9753

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.

Upvotes: 1

Related Questions