2
`import store from '../store/configureStore'; // ACTIONS

export const fetchIssues = () => {
  return {
    type: 'FETCH_ISSUE'
  };
};

export const fetchedIssues = (data) => {
  return {
    type: 'FETCHED_ISSUE',
    data
  };
};

export const error = () => {
  return {
    type: 'ERROR'
  };
};

export const thunkActionCreator = () => {
  store.dispatch(fetchIssues());
  return function(dispatch, getState) {
    return fetch(`https://api.github.com/repos/facebook/create-react-app/issues`)
    .then( (resp) => resp.json() )
    .then( (data) => dispatch(fetchedIssues(data)) )
    .catch( (err) => dispatch(error()) )
  };
};`

const initialState = {  // REDUCERS
  issues: [],
  isFetching: false,
  isFetched: false,
  isError: false
};

const asyncReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_ISSUE':
      return {
        ...state,
        isFetching: true,
        isFetched: false,
        isError: false
      };
    case 'FETCHED_ISSUE':
      return {
        ...state,
        issues: action.data,
        isFetching: false,
        isFetched: true,
        isError: false
      };
    case 'ERROR':
      return {
        ...state,
        issues: [],
        isError: true,
        isFetched: false,
        isFetching: false
      };
  };
};

export default asyncReducer; // Reducers

import React from 'react';  // ISSUES COMPONENT
import { thunkActionCreator } from './actions/actions';
import { connect } from 'react-redux';
import IssueLoader from './Loader';
import IssuesList from './IssuesList';

class Issues extends React.Component {

  componentDidMount() {
    this.props.dispatch(thunkActionCreator());
  }

  render() {
    return (
      <div className="App">
        {this.props.issue !== undefined && this.props.issue.isFetching ? <IssueLoader className='loader'/> : null}
        {this.props.issue !== undefined && this.props.issue.isFetched ? 
          this.props.issue.issues.map((issue) => <IssuesList data={issue}/>) : null}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    issue: state
  }
}

export default connect(mapStateToProps)(Issues);

import React from 'react'; // ISSUES LIST COMPONENT
import {Image, List} from 'semantic-ui-react';
import { connect } from 'react-redux';

class IssuesList extends React.Component {
  render() {
    return (
      <div>
        <h1>List</h1>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    issue: state
  }
}

export default (mapStateToProps)(IssuesList);

I'm making a github issues page using react and redux and the api is returning a single array of 30 Objects and when I use map on the given array It is giving the following error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

I've searched everything on stackoverflow, github but unable to find the solution. I'm attaching the pictures of my code please Help!!

Dacre Denny
  • 29,664
  • 5
  • 45
  • 65
Haroon Ahmed
  • 23
  • 4

2 Answers2

0

This error may have something to do with your component or how you are importing rather than the api. Here is a previous answer to your question Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object

crissy_codester
  • 16
0

It looks like your IssuesList is being exported for it's module incorrectly. I can't see why mapStateToProps is needed for IssuesList - based on your code, it would see IssuesList is really intended to display each issue item.

If you make the following adjustment to module where IssuesList is defined, your code should display a issue titles returned from the network request:

export default class IssuesList extends React.Component {
  render() { 
    return (
      <div>
        <h1>{ this.props.data.title }</h1>        
      </div>
    );
  }
}
Dacre Denny
  • 29,664
  • 5
  • 45
  • 65
  • Thaankk youu sooo much It worked but what's the difference between exporting like this way and the way I was doing? why that was giving error – Haroon Ahmed Sep 06 '18 at 22:38
  • Glad I could help you @HaroonAhmed ! The difference is that you original approach was passing the component to a locally declared function `mapStateToProps()` that just returned a JSON object (which is not what react is expecting). At that point you just want to export a component directly. Hope that makes sense! – Dacre Denny Sep 06 '18 at 23:19
  • @HaroonAhmed if you've found this helpful please consider accepting :-) – Dacre Denny Sep 06 '18 at 23:20