title: Why am I getting the error data.findIndex is not a function in my React with Redux project?
body: <p>I have an ASP.NET Core project with React and Redux, I'm also using the Kendo React UI.  I'm trying to return data to one of my Kendo widgets but I'm getting an error when I try to do so and I need help identifying what I've done wrong.  </p>
  
  <p>When I run my application I get the error of:</p>
  
  <blockquote>
    <p>1 of 2 errors on the page TypeError: data.findIndex is not a function
    DropDownList/_this.renderDropDownWrapper
    C:/Users/Allan/node_modules/@progress/kendo-react-dropdowns/dist/es/DropDownList/DropDownList.js:83</p>
    
    <p>80 | var focused = _this.state.focused;   81 | var opened =
    _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;   82 | var value = _this.value;</p>
    
    <blockquote>
      <p>83 | var selectedIndex = data.findIndex(function (i) { return areSame(i, value, dataItemKey); });   84 | var text =
      getItemValue(value, textField);   85 | var valueDefaultRendering =
      (React.createElement("span", { className: "k-input" }, text));   86 |
      var valueElement = valueRender !== undefined ?</p>
    </blockquote>
  </blockquote>
  
  <p>In the console this error shows as:</p>
  
  <blockquote>
    <p>Warning: Failed prop type: Invalid prop <code>data</code> of type <code>string</code>
    supplied to <code>DropDownList</code>, expected <code>array</code>.</p>
  </blockquote>
  
  <p>The error makes sense, but the data I'm returning should be an array.  It's not though as it doesn't appear to return anything.  So I've done something wrong.</p>
  
  <p>Here is my code so far, please note that my data is served from a generic repository.</p>
  
  <p><strong>components/vessels/WidgetData.js</strong></p>
  
  <pre><code>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 {
      state = {        
          vesseltypes: ""
      };
      componentWillMount() {
          this.props.requestTypes();        
      }
      render() {            
          return (            
              &lt;div&gt;    
                  &lt;DropDownList data={this.state.vesseltypes} /&gt;
              &lt;/div&gt;
          );
      }
  }
  export default connect(
      state =&gt; state.vesseltypes,
      dispatch =&gt; bindActionCreators(actionCreators, dispatch)
  )(WidgetData);
  </code></pre>
  
  <p><strong>components/store/Types.js</strong></p>
  
  <pre><code>const requestVesselTypes = 'REQUEST_TYPES';
  const receiveVesselTypes = 'RECEIVE_TYPES';
  const initialState = {
      vesseltypes: [],
      isLoading: false
  };
  
  export const actionCreators = {
      requestTypes: () =&gt; async (dispatch) =&gt; {
          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) =&gt; {
      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;
  };
  </code></pre>
  
  <p>And finally, the reducer is defined in the store</p>
  
  <p><strong>components/store/configureStore.js</strong></p>
  
  <pre><code>const reducers = {
      vesseltypes: Types.reducer
  };
  </code></pre>
  
  <p>I've tested the API to ensure data is there and it works, I've logged said data to the console from <code>Types.js</code> in the store and I can see it's returned.    I'm very much new to react with redux so I'm trying to find my way here and any help is appreciated.</p>