Get form values in semantic-ui-react

Question

Here is my form:

import React from 'react'
import { Form, Button } from 'semantic-ui-react'

const CreatePostForm = ({ onSubmit }) =>
  <Form onSubmit={onSubmit}>
    <Form.Input name='user' label='user' placeholder='Enter user name' />
    <Form.Input name='title' label='title' placeholder='Enter post title' />
    <Form.Input name='text' label='text' placeholder='Enter post text' />
    <Form.Input name='category' label='category' placeholder='Enter post category' />
    <Button type='submit'>Submit</Button>
  </Form>

export default CreatePostForm

It is then connected:

import { connect } from 'react-redux'
import CreatePostForm from '../components/CreatePostForm.jsx'

const mapDispatchToProps = (dispatch, props) => {
  return {
    onSubmit: (e, data) => {
      console.log(e)
      console.log(data)
    },  
  }
} 

const ConnectedCreatePostForm = connect(null, mapDispatchToProps)(CreatePostForm)
export default ConnectedCreatePostForm

In onSubmit I expect some data to be passed that would allow me to retrieve each input form field value by name but I can't access it somehow: there is event and data (I would hope for) which is just the form itself not really data. How to access the values upon submission? I don't want to handle state and want my component - CreatePostForm - to stay dumb.

Zachary Haber · Accepted Answer · 2021-04-28 14:24:08Z

3

You can use FormData to get the data from the inputs for the form directly:

Object.fromEntries(new FormData(event.target))

will give you an object made from the data of the form. (Note Object.fromEntries is a somewhat newer API. There's a lodash method: fromPairs that is functionally identical if needed)

Edit: If you need to use lodash's fromPairs: you'll need to do as follows, as lodash's fromPairs doesn't automatically go over the FormData as an iterator:

fromPairs(Array.from(new FormData(target)))

You could also grab the values directly from the form element by the input name:

console.log(event.target.user.value);

This will allow you to be able to use the form without having to set it up as controlled components.

Example below. I didn't include Semantic in the example because this is vanilla JS.

const CreatePostForm = () =>{
  const onSubmit = (event)=>{
    event.preventDefault();
    const {target} = event;
    console.log('FormData', Object.fromEntries(new FormData(target)));
    console.log('target.user.value', target.user.value);
  }
  return <form onSubmit={onSubmit}>
    <input name='user' label='user' placeholder='Enter user name' />
    <input name='title' label='title' placeholder='Enter post title' />
    <input name='text' label='text' placeholder='Enter post text' />
    <input name='category' label='category' placeholder='Enter post category' />
    <button type='submit'>Submit</button>
  </form>
}

ReactDOM.render(<CreatePostForm />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

edited Apr 28, 2021 at 14:24

answered Apr 28, 2021 at 2:45

Zachary Haber

11.1k1 gold badge22 silver badges34 bronze badges

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

4 Comments

Hadi KAR Over a year ago

yes confirmed, you can check this sandbox

Nikita Vlasenko Over a year ago

For me target.user.value works, but new FormData(target) produces an empty object, not sure why..

Nikita Vlasenko Over a year ago

I think thats because we need to loop through the obtained FormData and Object.fromEntries works, but lodash fromPairs does not.

Zachary Haber Over a year ago

@NikitaVlasenko, I updated with a bit of instruction on how to get fromPairs to work. Essentially you just need to convert FormData to an array. Array.from works well for that.

mcy · Accepted Answer · 2021-04-28 02:53:44Z

1

If you want to use Semantic UI React as designed, it appears you must use controlled components, so your hope of not using state doesn't seem feasible.

Semantic UI React Example

https://react.semantic-ui.com/collections/form/#usage-capture-values

And the tip just above the section:

Our <Form /> handles data just like a vanilla React . See React's controlled components docs for more.

answered Apr 28, 2021 at 2:53

mcy

2911 silver badge7 bronze badges

Collectives™ on Stack Overflow

Get form values in semantic-ui-react

2 Answers 2

4 Comments

Semantic UI React Example

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Semantic UI React Example

Comments

Your Answer

Sign up or log in

Post as a guest

Related