How to validate array of objects using reactjs

You already save the selected options into your state. So within your validate function, you just have to access the state and check the required properties. Also make sure you stay consistent with your variable names. Within your validate function, you name your return value formIsValid but later when you call the function, you use the return value as errors which is confusing. I renamed formIsValid to hasErrors to stay consistent.

  validate() {
    let required = ["name", "description"];
    let errors = {};
    let hasErrors = false;
    let data = this.state.data;

    required.forEach(w => {
      if (!data[w]) {
        hasErrors = true;
        errors[w] = "Please fill the required fields";
      }
    });
    this.setState({ errors: errors });

    // check if at least one option has been selected
    let currentLength = data.roles.length;
    if (!length) {
       hasErrors = true;
       erros["roles"] = "Please fill the required fields";
    }

    return formIsValid;
  }

And just add a error span as you did before:

        <div className="form-group">
          <label>Roles</label>
          <Select
            isMulti
            value={this.state.roles}
            options={options}
            onChange={e => this.handleAccessChange(e)}
          />
          <span>{this.state.errors["roles"]}</span>
        </div>

In your code there is no logic for validating roles.

So something like the following is needed:

  validate() {
    let required = ["name", "description"];
    let errors = {};
    let formIsValid = false;
    let data = this.state.data;

    required.forEach(w => {
      if (!data[w]) {
        formIsValid = true;
        errors[w] = "Please fill the required fields";
      }
    });

    if (this.state.roles.length === 0) {
        formIsValid = false;
        errors["roles"] = "Please select at least one role";
    }

    this.setState({ errors: errors });
    return formIsValid;
  }

https://codesandbox.io/s/funny-yalow-udgq7