Rendering a select field in Redux-Form 6 with validation

form-fields.js

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';

export const renderSelect = field => (
  <div>
    <select {...field.input}/>
    {field.touched && field.error && <div className="error">{field.error}</div>}
  </div>
);

form_validation.js

export function validate(formProps) {
  const errors = {};

  if (!formProps.firstName) {
    errors.firstName = 'Please enter a first name';
  }

  if (!formProps.lastName) {
    errors.lastName = 'Please enter a last name';
  }

  if (!formProps.email) {
    errors.email = 'Please enter an email';
  }

  if (!formProps.phoneNumber) {
    errors.phoneNumber = 'Please enter a phone number'
  }

  if(!formProps.sex) {
    errors.sex = 'You must enter your sex!'
  }

  return errors;
}

renderSelect.js

import { validate } from '../filepath/form_validation.js';
import { renderSelect } from './form-fields.js';

//render form field, missing all other components
//this is just the select object
<label>Gender:</label>
<Field name="sex" component={renderSelect}>
  <option></option>
  <option name="male">Male</option>
  <option name="female">Female</option>
</Field>

This worked for me:

import React from 'react';

export const renderDropDownField = (formValues) => {

    const { input, label, meta, options } = formValues;

    const { touched, error } = meta;

    const formcss = touched ? `form-control is-${error && touched ? 'invalid' : 'valid'}`: 'form-control';

    return (
        <div className="form-group">
            <label htmlFor={input.name}>{label}</label>
            <select {...input} className={formcss} id="exampleFormControlSelect2">
                {
                    options.map((option) => <option value={option.value}>{option.name}</option>)
                }
            </select>
            {(touched && error) ? <div className="help-block text-danger">{error}</div> : ''}
        </div>
    );
}

import React, { Component } from "react";
import { Field, reduxForm } from "redux-form";
import { renderDropDownField } from "../FormBuilder";

class MyForm extends Component {
    
   onFormSubmit = (formValues) => {
        console.log(formValues)
    }

    render() {
        const { handleSubmit } = this.props;
        const categories = [
            {
                value: 'none',
                name: 'Select Category'
            },
            {
                value: 'miss',
                name: 'Miscellaneous'
            },
        ];
        return (
            <div>
                <form onSubmit={handleSubmit(this.onFormSubmit)} className="needs-validation px-5">
                    <Field name="categorie" options={categories} component={renderDropDownField} />
                    <button type="submit" className='btn btn-primary'>Save Changes</button>
                </form>
            </div>
        )
    }
}

const validate = (formValues) => {
    const errors = {};
    if (!formValues.categorie || 'none' === formValues.categorie) {
        errors.categorie = "Please select a valid categorie.";
    }
    return errors;
}


export default reduxForm({
    form: 'blogEditForm',
    validate
})(MyForm);

Hi everyone,

I am using react 17.0.2
redux 4.1.2
react-redux 7.2.6
and redux-form 8.3.8

Unable to render the dropdown using Field from redux-Form.

Can someone guide me in right direction? Any help would be appreciated.