Search code examples
reactjsredux-form

Selected Dropdown value is not getting populated


I am working on Redux form. I am facing some issue with dropdown values.When I select some dropdown value, I am not getting the selected value onSubmit of the form.What could be the issue?

export class AddRecipientForm extends React.Component {
    onSubmit(values) {
        console.log(values)
        const recipient = Object.assign({}, values);
        return this.props.dispatch(addRecipient(recipient));
    }

    render() {
        if (this.props.submitSucceeded === true) {
            return (
                <div>
                    <Redirect to={`/dashboard`} />
                </div>
            );
        }


        return (
            <div>
                <form
                    className="add-recipient-form"
                    aria-label="add new recipient form"
                    onSubmit={this.props.handleSubmit(values => this.onSubmit(values))}>
                    <label htmlFor="name">Name</label>
                    <Field component="input" name="name" type="text" />

                    <label htmlFor="relationship">Relationship</label>
                    <Field component="input" type="text" name="relationship" required />

                    <label htmlFor="occassion">Occassion</label>
                    <Field component="input" type="text" name="occassion" required />

                    <label htmlFor="giftDate">Gift Date</label>
                    <Field component="input" type="date" name="giftDate" required />

                    <label htmlFor="gift">Gift</label>
                    <Field component="input" type="text" name="gift" required />

                    <label htmlFor="budget">Cost</label>
                    <Field component="input" type="number" name="budget" required />

                    <label
                        htmlFor="status">
                        Gift Status
                    </label>
                    <Field component={select} name="status" required>
                        <option value="notPurchased">Not Purchased</option>
                        <option value="purchased">Purchased</option>
                        <option value="gifted">Gifted</option>
                    </Field>

                    <button type="submit">Submit</button>
                    <Link to="/dashboard">
                        <button type="button" aria-label="go back">
                            Back
                        </button>
                    </Link>
                </form>
            </div>
        );
    }
}

AddRecipientForm = reduxForm({
    form: 'addRecipient'
    // onSubmitFail: (errors, dispatch) => {
    //  console.log(`Error: ${JSON.stringify(errors)}`);
    //  dispatch(focus('addRecipient', Object.keys(errors)[0]));
    }
)(AddRecipientForm);


export default AddRecipientForm;

I am getting other values except the dropdown values. Replaced Field with select but still its not working


Solution

  • Finally fixed the issue by including default dropdown value.

                            <option key={2333333} value={''}>Please Select</option>
    

    But still wonder why does it require default dropdown