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:

components/vessels/WidgetData.js

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() {        
    this.props.requestTypes();      
}
render() {
    console.log(this.props.vesseltypes)
    return (
            <div>
                <DropDownList data={this.props.vesseltypes} />
            </div>
        );
    }
}
export default connect(
    vesseltypes => vesseltypes,
    dispatch => bindActionCreators(actionCreators, dispatch)
)(WidgetData);

components/store/Types.js

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 {
            ...state,
            isLoading: true
        };
    }
    if (action.type === receiveVesselTypes) {
        alltypes = action.alltypes;
        return {
            ...state,
            vesseltypes: action.alltypes,
            isLoading: false
        }
    }    
    return state;
};

And finally, the reducer is defined in the store

components/store/configureStore.js

const reducers = {
    vesseltypes: Types.reducer
};

Controllers/KendoDataController.cs

    [HttpGet]
    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:

<div>
  <DropDownList data={this.props.vesseltypes.map((vessel) => vessel.type)} />
</div>

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

etarhan
etarhan
April 15, 2019 11:25 AM

Related Questions





redux-persist blacklist not working

Updated October 17, 2017 04:26 AM