We Keep Coding

Bind Id through another property React [duplicate]

I'm using react and I want to get the value of the selected option of a dropdown in react but I don't know how. Any suggestions? thanks!
My dropdown is just a select like:
<select id = "dropdown">
<option value="N/A">N/A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

The code in the render method represents the component at any given time.
If you do something like this, the user won't be able to make selections using the form control:
<select value="Radish">
<option value="Orange">Orange</option>
<option value="Radish">Radish</option>
<option value="Cherry">Cherry</option>
</select>
So there are two solutions for working with forms controls:
Controlled Components Use component state to reflect the user's selections. This provides the most control, since any changes you make to state will be reflected in the component's rendering:
example:
var FruitSelector = React.createClass({
getInitialState:function(){
return {selectValue:'Radish'};
},
handleChange:function(e){
this.setState({selectValue:e.target.value});
},
render: function() {
var message='You selected '+this.state.selectValue;
return (
<div>
<select
value={this.state.selectValue}
onChange={this.handleChange}
>
<option value="Orange">Orange</option>
<option value="Radish">Radish</option>
<option value="Cherry">Cherry</option>
</select>
<p>{message}</p>
</div>
);
}
});
React.render(<FruitSelector name="World" />, document.body);
JSFiddle: http://jsfiddle.net/xe5ypghv/
Uncontrolled Components The other option is to not control the value and simply respond to onChange events. In this case you can use the defaultValue prop to set an initial value.
<div>
<select defaultValue={this.state.selectValue}
onChange={this.handleChange}
>
<option value="Orange">Orange</option>
<option value="Radish">Radish</option>
<option value="Cherry">Cherry</option>
</select>
<p>{message}</p>
</div>
http://jsfiddle.net/kb3gN/10396/
The docs for this are great: http://facebook.github.io/react/docs/forms.html
and also show how to work with multiple selections.
UPDATE
A variant of Option 1 (using a controlled component) is to use Redux and React-Redux to create a container component. This involves connect and a mapStateToProps function, which is easier than it sounds but probably overkill if you're just starting out.

Implement your Dropdown as
<select id = "dropdown" ref = {(input)=> this.menu = input}>
<option value="N/A">N/A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
Now, to obtain the selected option value of the dropdown menu just use:
let res = this.menu.value;

It should be like:
import React, { useState } from "react";
export default function App() {
const getInitialState = () => {
const value = "Orange";
return value;
};
const [value, setValue] = useState(getInitialState);
const handleChange = (e) => {
setValue(e.target.value);
};
return (
<div>
<select value={value} onChange={handleChange}>
<option value="Orange">Orange</option>
<option value="Radish">Radish</option>
<option value="Cherry">Cherry</option>
</select>
<p>{`You selected ${value}`}</p>
</div>
);
}
you can see it here: https://codesandbox.io/s/quizzical-https-t1ovo?file=/src/App.js:0-572

Just use onChange event of the <select> object.
Selected value is in e.target.value then.
By the way, it's a bad practice to use id="...". It's better to use ref=">.."
http://facebook.github.io/react/docs/more-about-refs.html

As for front-end developer many time we are dealing with the forms in which we have to handle the dropdowns and we have to
use the value of selected dropdown to perform some action or the send the value on the Server, it's very simple
you have to write the simple dropdown in HTML just put the one onChange method for the selection in the dropdown
whenever user change the value of dropdown set that value to state so you can easily access it in AvFeaturedPlayList
1
remember you will always get the result as option value and not the dropdown text which is displayed on the screen
import React, { Component } from "react";
import { Server } from "net";
class InlineStyle extends Component {
constructor(props) {
super(props);
this.state = {
selectValue: ""
};
this.handleDropdownChange = this.handleDropdownChange.bind(this);
}
handleDropdownChange(e) {
this.setState({ selectValue: e.target.value });
}
render() {
return (
<div>
<div>
<div>
<select id="dropdown" onChange={this.handleDropdownChange}>
<option value="N/A">N/A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div>Selected value is : {this.state.selectValue}</div>
</div>
</div>
);
}
}
export default InlineStyle;

Using React Functional Components:
const [option,setOption] = useState()
function handleChange(event){
setOption(event.target.value)
}
<select name='option' onChange={handleChange}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>

import React from 'react';
import Select from 'react-select';
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
{ value: 'vanilla', label: 'Vanilla' },
];
class App extends React.Component {
state = {
selectedOption: null,
};
handleChange = selectedOption => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
};
render() {
const { selectedOption } = this.state;
return (
<Select
value={selectedOption}
onChange={this.handleChange}
options={options}
/>
);
}
}
And you can check it out on this site.

It is as simple as that. You just need to use "value" attributes instead of "defaultValue" or you can keep both if a pre-selected feature is there.
....
const [currentValue, setCurrentValue] = useState(2);
<select id = "dropdown" value={currentValue} defaultValue={currentValue}>
<option value="N/A">N/A</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
.....
setTimeut(()=> {
setCurrentValue(4);
}, 4000);
In this case, after 4 secs the dropdown will be auto-selected with option 4.

I was making a drop-down menu for a language selector - but I needed the dropdown menu to display the current language upon page load. I would either be getting my initial language from a URL param example.com?user_language=fr, or detecting it from the user’s browser settings. Then when the user interacted with the dropdown, the selected language would be updated and the language selector dropdown would display the currently selected language.
In the spirit of the other answers using food examples, I got all sorts of fruit goodness for you.
First up, answering the initially asked question with a basic React functional component - two examples with and without props, then how to import the component elsewhere.
Next up, the same example - but juiced up with Typescript.
Then a bonus finale - A language selector dropdown component using Typescript.
Basic React (16.13.1) Functional Component Example. Two examples of FruitSelectDropdown , one without props & one with accepting props fruitDetector
import React, { useState } from 'react'
export const FruitSelectDropdown = () => {
const [currentFruit, setCurrentFruit] = useState('oranges')
const changeFruit = (newFruit) => {
setCurrentFruit(newFruit)
}
return (
<form>
<select
onChange={(event) => changeFruit(event.target.value)}
value={currentFruit}
>
<option value="apples">Red Apples</option>
<option value="oranges">Outrageous Oranges</option>
<option value="tomatoes">Technically a Fruit Tomatoes</option>
<option value="bananas">Bodacious Bananas</option>
</select>
</form>
)
}
Or you can have FruitSelectDropdown accept props, maybe you have a function that outputs a string, you can pass it through using the fruitDetector prop
import React, { useState } from 'react'
export const FruitSelectDropdown = ({ fruitDetector }) => {
const [currentFruit, setCurrentFruit] = useState(fruitDetector)
const changeFruit = (newFruit) => {
setCurrentFruit(newFruit)
}
return (
<form>
<select
onChange={(event) => changeFruit(event.target.value)}
value={currentFruit}
>
<option value="apples">Red Apples</option>
<option value="oranges">Outrageous Oranges</option>
<option value="tomatoes">Technically a Fruit Tomatoes</option>
<option value="bananas">Bodacious Bananas</option>
</select>
</form>
)
}
Then import the FruitSelectDropdown elsewhere in your app
import React from 'react'
import { FruitSelectDropdown } from '../path/to/FruitSelectDropdown'
const App = () => {
return (
<div className="page-container">
<h1 className="header">A webpage about fruit</h1>
<div className="section-container">
<h2>Pick your favorite fruit</h2>
<FruitSelectDropdown fruitDetector='bananas' />
</div>
</div>
)
}
export default App
FruitSelectDropdown with Typescript
import React, { FC, useState } from 'react'
type FruitProps = {
fruitDetector: string;
}
export const FruitSelectDropdown: FC<FruitProps> = ({ fruitDetector }) => {
const [currentFruit, setCurrentFruit] = useState(fruitDetector)
const changeFruit = (newFruit: string): void => {
setCurrentFruit(newFruit)
}
return (
<form>
<select
onChange={(event) => changeFruit(event.target.value)}
value={currentFruit}
>
<option value="apples">Red Apples</option>
<option value="oranges">Outrageous Oranges</option>
<option value="tomatoes">Technically a Fruit Tomatoes</option>
<option value="bananas">Bodacious Bananas</option>
</select>
</form>
)
}
Then import the FruitSelectDropdown elsewhere in your app
import React, { FC } from 'react'
import { FruitSelectDropdown } from '../path/to/FruitSelectDropdown'
const App: FC = () => {
return (
<div className="page-container">
<h1 className="header">A webpage about fruit</h1>
<div className="section-container">
<h2>Pick your favorite fruit</h2>
<FruitSelectDropdown fruitDetector='bananas' />
</div>
</div>
)
}
export default App
Bonus Round: Translation Dropdown with selected current value:
import React, { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
export const LanguageSelectDropdown: FC = () => {
const { i18n } = useTranslation()
const i18nLanguage = i18n.language
const [currentI18nLanguage, setCurrentI18nLanguage] = useState(i18nLanguage)
const changeLanguage = (language: string): void => {
i18n.changeLanguage(language)
setCurrentI18nLanguage(language)
}
return (
<form>
<select
onChange={(event) => changeLanguage(event.target.value)}
value={currentI18nLanguage}
>
<option value="en">English</option>
<option value="de">Deutsch</option>
<option value="es">Español</option>
<option value="fr">Français</option>
</select>
</form>
)
}
An invaluable resource for React/Typescript

You can handle it all within the same function as following
<select className="form-control mb-3" onChange={(e) => this.setState({productPrice: e.target.value})}>
<option value="5">5 dollars</option>
<option value="10">10 dollars</option>
</select>
as you can see when the user select one option it will set a state and get the value of the selected event without furder coding require!

If you want to get value from a mapped select input then you can refer to this example:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
fruit: "banana",
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
console.log("Fruit Selected!!");
this.setState({ fruit: e.target.value });
}
render() {
return (
<div id="App">
<div className="select-container">
<select value={this.state.fruit} onChange={this.handleChange}>
{options.map((option) => (
<option value={option.value}>{option.label}</option>
))}
</select>
</div>
</div>
);
}
}
export default App;

import {React, useState }from "react";
function DropDown() {
const [dropValue, setDropValue ]= useState();
return <>
<div>
<div class="dropdown">
<button class="btn btn-secondary" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
{dropValue==null || dropValue=='' ?'Select Id':dropValue}
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" onClick={()=> setDropValue('Action')} href="#">Action</a></li>
<li><a class="dropdown-item" onClick={()=> setDropValue('Another action')} href="#">Another action</a></li>
<li><a class="dropdown-item" onClick={()=> setDropValue('Something else here')} href="#">Something else here</a></li>
</ul>
</div>
</div>
</>
}
export default DropDown

<select value ={this.state.value} onChange={this.handleDropdownChange}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

As mentioned by Karen above you can just use the target value from the event triggered. Here is a small snippet of the code
`<select class="form-select py-2"
onChange={(e) => setVotersPerPage(e.target.value)}>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
</select>`

React-hook-form `register` not registering field with name has a single quote in the middle,

I have integrated react-hook-form with my form, where it is not registering field with name has single quote in the middle. Instead it stripes single quote .
import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import "./styles.css";
//App component
export default function App() {
const { register, handleSubmit } = useForm();
//onSubmit Handler
const onSubmit = (data) => console.log(data);
//field name value
const name = "Patient's Name";
//Return
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register(`register ${name}`)} />
<select {...register("gender")}>
<option value="female">female</option>
<option value="male">male</option>
<option value="other">other</option>
</select>
<input type="submit" />
</form>
);
}
//Renders
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
output : {register Patients Name: undefined, gender: "female"}

It looks like you are trying to assign the input field name as the value. You could try using the 'name' as the field name and ${name} as the input value.
Something like this may work better:
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register("name")} />
<select {...register("gender")}>
<option value="female">female</option>
<option value="male">male</option>
<option value="other">other</option>
</select>
<input type="submit" />
</form>
If you really need a dynamic input field name, you could try:
const name = "Patient\'s Name";
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register({name})} />
<select {...register("gender")}>
<option value="female">female</option>
<option value="male">male</option>
<option value="other">other</option>
</select>
<input type="submit" />
</form>
);
}

How do I properly map an array in which it's coming from one of my properties defined in mapStateToProps for a select drop down in my form?

The below code is from my NewFighterForm.js file within my app's component folder:
import React from 'react';
import { updateNewFighterForm } from '../actions/newFighterForm.js';
import { connect } from 'react-redux';
import Button from 'react-bootstrap/esm/Button';
const NewFighterForm = ({ formData, updateNewFighterForm, handleSubmit, editMode }) => {
const {name, alias, nationality, division, stance, height, reach, status, champion, win, loss, draw, ko} = formData
const handleChange = event => {
const { name, value } = event.target
debugger
updateNewFighterForm(name, value)
}
return (
<div>
<h1>Add Fighter</h1>
<form onSubmit={event => {
event.preventDefault()
debugger
handleSubmit(formData)
}}>
<ol>
<ul>
<label>Add Name: </label>
<br></br>
<input
placeholder="Enter Name"
name="name"
onChange={handleChange}
value={name}
/>
</ul>
<label>Add Alias: </label>
<br></br>
<ul>
<input
placeholder="Enter Alias"
name="alias"
onChange={handleChange}
value={alias}
/>
</ul>
<label>Add Nationality: </label>
<br></br>
<ul>
<input
placeholder="Enter Nationality"
name="nationality"
onChange={handleChange}
value={nationality}
/>
</ul>
<label>Choose Division: </label>
<br></br>
<select name="division"
value={"" + division}
onChange={handleChange}>
<option disabled>Choose the following weight division</option>
<option value="Flyweight">Flyweight</option>
<option value="Bantamweight">Bantamweight</option>
<option value="Featherweight">Featherweight</option>
<option value="Lightweight">Lightweight</option>
<option value="Welterweight">Welterweight</option>
<option value="Middleweight">Middleweight</option>
<option value="Light Heavyweight">Light Heavyweight</option>
<option value="Cruiserweight">Cruiserweight</option>
<option value="Heavyweight">Heavyweight</option>
</select>
<br></br>
<label>Choose Fighter's Stance: </label>
<br></br>
<select name="stance"
value={"" + stance}
onChange={handleChange}>
<option disabled>Choose the following stance type</option>
<option value="Orthodox">Orthodox</option>
<option value="Southpaw">Southpaw</option>
</select>
<br></br>
<label>Add Height: </label>
<br></br>
<input
placeholder="Enter Height (i.e 5 ft 5 in)"
name="height"
onChange={handleChange}
value={height}
/>
<br></br>
<label>Add Reach: </label>
<br></br>
<input
placeholder="Enter Reach (i.e 68 in)"
name="reach"
onChange={handleChange}
value={reach}
/>
<br></br>
<label>Are they still fighting?</label>
<br></br>
<select name="status"
value={"" + status}
onChange={handleChange}>
<option disabled>Choose whether fighter is still competing</option>
<option value="inactive">inactive</option>
<option value="active">active</option>
</select>
<br></br>
<label>Check if they ever were a World Champion</label>
<input
type="checkbox"
name="champion"
defaultChecked={false}
value={champion}
/>
<br></br>
<label>W:</label>
<input
placeholder="Enter number of wins"
name="win"
type="number"
pattern="[0-200]*"
inputMode="numeric"
onChange={handleChange}
value={win}
/>
<br></br>
<label>L:</label>
<input
placeholder="Enter number of losses"
name="loss"
type="number"
pattern="[0-200]*"
inputMode="numeric"
onChange={handleChange}
value={loss}
/>
<br></br>
<label>D:</label>
<input
placeholder="Enter number of draws"
name="draw"
type="number"
pattern="[0-200]*"
inputMode="numeric"
onChange={handleChange}
value={draw}
/>
<br></br>
<label>KO:</label>
<input
placeholder="Enter number of KO"
name="ko"
type="number"
pattern="[0-200]*"
inputMode="numeric"
onChange={handleChange}
value={ko}
/>
<br></br>
<label>List for Fighter: </label>
<br></br>
<select name="lists"
onChange={handleChange}>
<option disabled>Choose List for Fighter</option>
</select>
<br></br>
<Button
type="submit"
value={ editMode ? "Update Fighter" : "Create Fighter" }
>Create Fighter</Button>
</ol>
</form>
</div>
)
}
const mapStateToProps = state => {
// debugger
return {
formData: state.newFighterForm,
lists: state.myLists
}
};
export default connect(mapStateToProps, { updateNewFighterForm })(NewFighterForm)
The bottom of my form is where I would like to input the drop down select for the user to choose which one of their lists they would like to add the fighter to. In my debugger placed within mapStateToProps, I see the array of lists that is defined in "lists: state.myLists". I would like to be able to properly map the array and show the select option for the user to choose the list. I assume that I will need to add "lists" as one of the destructed properties defined for NewFighterForm (let me know if my understanding is correct). Please let me know if any more details are needed and I will update the post accordingly. Thank You all, much appreciated!

Yes, destructure lists from the props object and, assuming lists is an array, map as normal JSX. Here I'm assuming the lists array contains element objects that have a value and label property to display from, this will need to be tweaked to fit your actual lists array element shape.
const NewFighterForm = ({
formData,
updateNewFighterForm,
handleSubmit,
editMode,
lists, // <-- get lists from props
}) => {
...
return (
<div>
<h1>Add Fighter</h1>
<form
onSubmit={event => {
event.preventDefault()
debugger
handleSubmit(formData)
}}
>
<ol>
...
<label>List for Fighter: </label>
<br></br>
<select
name="lists"
onChange={handleChange}
>
<option disabled>Choose List for Fighter</option>
{lists.map(listItem => ( // <-- map the list
<option value={listItem.value}> // <-- the option value
{listItem.label} // <-- what you want displayed
</option>
))}
</select>
...
</ol>
</form>
</div>
)
};
const mapStateToProps = state => {
// debugger
return {
formData: state.newFighterForm,
lists: state.myLists
}
};

React form hooks How to validate select option

I am working with reach hooks and to validate my form fields I am using react-hook-form as it is the best option for now
SO to validating my normal input fields I am doing just ref={register({ required: true })} then on submit it is checking for errors as I am importing errors from react-hook-form
But when I am doing same for select field it is not checking the error object
This is what I am doing
<label htmlFor="func" className="form_label">
Select function
</label>
<select name="func" ref={register({ required: true })}>
<option selected disabled>
Select function
</option>
<option value="5">Function 2</option>
<option value="6">Function 3</option>
</select>
{errors.func && (
<div>
<span>Function is required</span>
</div>
)}
I don't know what I am missing
My actual code is with dynamic data
so I am looping it like this
<Form.Control as="select" custom>
<option disabled selected>Select role</option>
{loading === false &&
data.get_roles.map((li) => (
<option value={li.user_type_id}>
{li.user_type}</option>
))}
</Form.Control>
React hook form

try this code. I tried and it worked fine:
<label htmlFor="func" className="form_label">
Select function
</label>
<select name="func"
ref={register({
required: "select one option"
})}>
<option value=""></option>
<option value="5">Function 2</option>
<option value="6">Function 3</option>
</select>
{errors.func && <p style={{color:'red'}}> {errors.func.message}</p> }

//This Works for me
import React from 'react'
import { useForm } from "react-hook-form";
function Test() {
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = data => console.log(data);
return (
<div>
<form onSubmit={handleSubmit(onSubmit)}>
<select
className="custom-select"
id="selectmethod"
defaultValue=""
name="exampleRequired"
{...register("exampleRequired", { required: true })}
>
<option value="" disabled>Select Option</option>
<option value="1">Blue</option>
<option value="2">Red</option>
</select>
{errors.exampleRequired && <span className="formError errorMssg">This field is required</span>}
<br/>
<button type="submit" >SUBMIT </button>
</form>
</div>
)
}
export default Test

I think that I good way to validate forms is with yup. It gives you a lot of tools for validation and its integration with RHF is seamlessly: How to integrate yup with react-hook-form
import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";
import * as yup from "yup";
import { yupResolver } from "#hookform/resolvers/yup";
const schema = yup.object().shape({
mySelect: yup.string().notOneOf([""], "You must select an option!")
});
function MyForm() {
const {
register,
handleSubmit,
formState: { errors }
} = useForm({
defaultValues: {
mySelect: ""
},
resolver: yupResolver(schema)
});
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<select {...register("mySelect")}>
<option value="" disabled>
Select option
</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<button type="submit">Submit </button>
{errors.mySelect && <p className="error">{errors.mySelect.message}</p>}
</form>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<MyForm />, rootElement);
Sandbox: Simple select validation with yup

How to get value from Select/Option component from Ant design

I want to retrieve the value from my selection so I can make post requests. I have no problem getting from text input, but for some reason I can't get it from the drop down menu select. I end up getting a
"TypeError: Cannot read property 'value' of undefined"
Here is the code I am using.
import React from "react";
import { Form, Input, Button, Select } from "antd";
const { Option } = Select;
class ItemForm extends React.Component {
handleFormSubmit = event => {
event.preventDefault();
const name = event.target.elements.name.value;
const description = event.target.elements.description.value;
const category = event.target.elements.category.value;
console.log(name, description, this.refs.category.value);
};
render() {
return (
<div>
<Form onSubmit={this.handleFormSubmit}>
<Form.Item label="Form Layout" />
<Form.Item label="Product Name">
<Input name="name" placeholder="Ex: Organic Apple..." />
</Form.Item>
<Form.Item label="Description">
<Input name="description" placeholder="Ex: Juicy organic apples!" />
</Form.Item>
<Form.Item label="Category">
<Select name="category" placeholder="Please select a category">
<Option value="Fruit">Fruit</Option>
<Option value="Vegetable">Vegetable</Option>
<Option value="Poultry">Poultry</Option>
</Select>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
</div>
);
}
}
export default ItemForm;

Use onChange which is fired when the value of the select changes. antd select documentation
<Form.Item label="Category">
<Select
onChange={(value) => {
alert(value)
}}
name="category"
placeholder="Please select a category">
<Option value="Fruit">Fruit</Option>
<Option value="Vegetable">Vegetable</Option>
<Option value="Poultry">Poultry</Option>
</Select>
</Form.Item>
working example

Something similar to the classic javascript approach, you intended to use, could be use getFieldValue.
But coupling to coherent createRef , Form and Form.Item as below.
When getting values, remember to reference the Form.Item name and not the Input one ;-)
I have created a sandbox demo hoping other people will enjoy or contribute.
import React from "react";
import { Form, Input, Button, Select } from "antd";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css"; //export default ItemForm;
const { Option } = Select;
class ItemForm extends React.Component {
formRef = React.createRef();
handleFormSubmit = event => {
event.preventDefault();
console.log("All field values", this.formRef.current.getFieldsValue());
const name = this.formRef.current.getFieldValue("productName"); //OLD event.target.elements.name.value;
const description = this.formRef.current.getFieldValue("description"); //OLD event.target.elements.description.value;
const category = this.formRef.current.getFieldValue("category"); //OLD event.target.elements.category.value;
console.log(name, description, category);
alert(`${name}, ${description}, ${category}`);
};
render() {
return (
<div>
<Form ref={this.formRef} onSubmit={this.handleFormSubmit}>
<Form.Item label="Form Layout (Form.Item-createRef-getFieldValue Example)" />
<Form.Item label="Product Name" name="productName">
<Input name="name" placeholder="Ex: Organic Apple..." />
</Form.Item>
<Form.Item label="Description" name="description">
<Input name="description" placeholder="Ex: Juicy organic apples!" />
</Form.Item>
<Form.Item label="Category" name="category">
<Select name="category" placeholder="Please select a category">
<Option value="Fruit">Fruit</Option>
<Option value="Vegetable">Vegetable</Option>
<Option value="Poultry">Poultry</Option>
</Select>
</Form.Item>
<Form.Item>
<Button
type="primary"
htmlType="submit"
onClick={this.handleFormSubmit}
>
Submit
</Button>
</Form.Item>
</Form>
</div>
);
}
}
ReactDOM.render(<ItemForm />, document.getElementById("container"));

Managed it by using onChange as shown below this.
state = {
status: ""
};
<Form.Item label="Status">
<Select
name="status"
onChange={value => {
this.setState({ status: value });
}}
placeholder="Please choose the status"
>
<Option value="new">New</Option>
<Option value="open">Open</Option>
<Option value="rejected">Rejected</Option>
<Option value="deferred">Deferred</Option>
<Option value="reopened">Reopened</Option>
</Select>
</Form.Item>

unlike what you would expect, in Ant Design Select you can't get the value by calling:
onChange={(e)=>console.log(e.target.value)}
no. instead you get the value directly by just accessing the event itself, like this:
onChange={(e)=>console.log(e)}

You can fix this as follows. (Works fine for Antd)
<Select
onChange={(text, index) => {
console.log(index.children);
}}
>

A better and cleaner way to avoid this issue is to define all the form values and labels in an array and pass it into the . Declare or use an onChange event and store the value of the event in your state.