How to I convert my props data into an array in my React with Redux project?

by Yanayaya   Last Updated April 15, 2019 11:26 AM

In my solution which is an ASP.NET Core project with React, Redux, and Kendo React Components I need to return my props as an array. I'm using the Kendo Dropdown widget as below.

<DropDownList data={this.props.vesseltypes} />

However I receive the error of :

Failed prop type: Invalid prop data of type object supplied to DropDownList, expected array.

So, I checked my returned data from the props.vesseltypes which is an array of as opposed to a flat array.

Array of Objects

Here is my code for how this data is returned:


import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { actionCreators } from '../../store/Types';
import { DropDownList } from '@progress/kendo-react-dropdowns';

class WidgetData extends Component {
componentWillMount() {        
render() {
    return (
                <DropDownList data={this.props.vesseltypes} />
export default connect(
    vesseltypes => vesseltypes,
    dispatch => bindActionCreators(actionCreators, dispatch)


const requestVesselTypes = 'REQUEST_TYPES';
const receiveVesselTypes = 'RECEIVE_TYPES';
const initialState = {
    vesseltypes: [],
    isLoading: false

export const actionCreators = {
    requestTypes: () => async (dispatch) => {
        dispatch({ type: requestVesselTypes });

        const url = 'api/KendoData/GetVesselTypes';
        const response = await fetch(url);
        const alltypes = await response.json();

        dispatch({ type: receiveVesselTypes, alltypes });
export const reducer = (state, action) => {
    state = state || initialState;

    if (action.type === requestVesselTypes) {
        return {
            isLoading: true
    if (action.type === receiveVesselTypes) {
        alltypes = action.alltypes;
        return {
            vesseltypes: action.alltypes,
            isLoading: false
    return state;

And finally, the reducer is defined in the store


const reducers = {
    vesseltypes: Types.reducer


    public JsonResult GetVesselTypes()
        var types = _vesselTypeService.GetVesselTypes();

        return Json(types);

So, the dropdown widget expects an array, what I return via the store is an array of objects. As such, this can't be used by the dropdown because it's not what it is expecting. My question is, how do I return this as a single array or flat array?

Answers 1

You could just map it to an array of strings since that's what Kendo DropdownList seems to expect:

  <DropDownList data={ => vessel.type)} />

Alternatively you could look into how to implement a HOC to map your objects to values, it's specified on in the Kendo docs

April 15, 2019 11:25 AM

Related Questions

redux-persist blacklist not working

Updated October 17, 2017 04:26 AM