Correct way to validate MDBSelect in React Form

Unfortunately, there is no property required for our Select component. But it's a good idea to implement it in the future.

By default input's text = 'Choose your option' string. If there is no option selected it doesn't change.

Rely on the information above for make our form validation, you can use button with a onClick method where your validation logic will be described. You can try next code(required to be finished ) :

import React, { Component } from 'react';
import { MDBSelect, MDBSelectInput, MDBSelectOptions, MDBSelectOption, MDBContainer } from 'mdbreact';

class FormValidation extends Component {
    state = {
        value: 'Choose your option'
    };

    // build function for your selects, and pass it as getValue property to reed the select's value
    getValueOfSelect = (value) => {
        this.setState({ value });
    };

    handleSubmit = (e) => {
        e.preventDefault();
        if (this.state.value !== 'Choose your option') {
        //....validation logic here
        }
    };

    render() {
        return (
            <MDBContainer>
                <form>
                    <MDBSelect getValue={this.getValueOfSelect} getTextContent={this.getValueOfSelect}>
                        <MDBSelectInput />
                        <MDBSelectOptions>
                            <MDBSelectOption>Option nr 1</MDBSelectOption>
                            <MDBSelectOption>Option nr 2</MDBSelectOption>
                            <MDBSelectOption>Option nr 3</MDBSelectOption>
                            <MDBSelectOption>Option nr 4</MDBSelectOption>
                            <MDBSelectOption>Option nr 5</MDBSelectOption>
                        </MDBSelectOptions>
                    </MDBSelect>

                    <button type="submit"onClick={this.handleSubmit}>
                        Submit
                    </button>
                </form>
            </MDBContainer>
        );
    }
}

export default FormValidation;

Best regards.

 handleSubmit = (e) => {
        if (this.state.value !== 'Choose your option') {
            e.preventDefault();
        }
    };