Component is not showing - reactjs

Question

Component is not showing. I don't get any error messages. I am trying to fetch data from a url and build a simple list on PollList from that data. I can console.log(polls) from the action and it works but it just doesn't build the list
Here is the code.
pollsactions.js
import { GET_POLLS, POLLS_LOADING } from './types';
export const getPolls = () => dispatch => {
return fetch(URL)
.then(res => res.json())
.then(polls => {
dispatch({
type: GET_POLLS,
payload: polls
})
})
}
pollsreducers.js
import {
GET_POLLS,
POLLS_LOADING
} from '../actions/types';
const pollReducer = (state = [], { type, payload }) => {
switch (type) {
case GET_POLLS:
return payload
default:
return state
}
}
export default pollReducer;
PollList.js
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { getPolls } from '../redux/actions/pollsActions';
class PollList extends Component {
componentDidMount() {
this.props.getPolls();
}
render() {
const { polls } = this.props.polls
return (
<div>
{
polls && polls.map((poll) => (
<div key={poll.id}>
{(poll.type)}
</div>
))
}
</div>
)
}
}
const mapStateToProps = state => ({
polls: state.polls
});
export default connect(
mapStateToProps,
{ getPolls }
)(PollList);

Answer 1

You are destructuring polls incorrectly. polls is on this.props based on your mapStateToProps(), not on this.props.polls. Try changing:
const { polls } = this.props.polls;
to:
const { polls } = this.props;
Otherwise, without destructuring, it would look like:
const polls = this.props.polls;
Hopefully that helps!