Redux props not showing in React component - reactjs

Question

I can't understand why my Redux props are showing empty on the React component. This is the screenshot of the Redux state:
This is the component that visualizes. It is a child of a parent component that fetches the data and runs a for loop through the array of elements.
import React, { Component } from 'react'
import { connect } from "react-redux";
import PropTypes from "prop-types";
class ResourceCard extends Component {
render() {
const { resource } = this.props;
return (
<div className="resource-card">
<div className="resource-card-header">
<span className="res-span-header">{resource.header}</span>
</div>
<div className="resource-card-image">
<img src={resource.image} alt={resource.header} width='300px' />
</div>
<div className="resource-card-desc">
<span className="res-span-desc">{resource.description}</span>
</div>
<div className="resource-card-link">
<span className="res-span">{resource.website}</span>
</div>
</div>
)
}
}
ResourceCard.propTypes = {
resource: PropTypes.object.isRequired,
auth: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
auth: state.auth,
resource: state.resource
});
export default connect(
mapStateToProps,
{}
)(ResourceCard);
While the css is being rendered properly, and there are no errors in the console, the content itself is not there:
What could possibly be wrong here?
EDITED: Adding actions code:
// Get Resources
export const getResources = () => dispatch => {
axios
.get("/api/resources")
.then(res =>
dispatch({
type: GET_RESOURCES,
payload: res.data
})
)
.catch(err =>
dispatch({
type: GET_RESOURCES,
payload: null
})
);
};
And the reducer:
import {
ADD_RESOURCE,
GET_RESOURCES,
DELETE_RESOURCE,
GET_RESOURCE
} from "../actions/types";
const initialState = {
resources: [],
resource: {}
};
export default function(state = initialState, action) {
switch (action.type) {
case GET_RESOURCES:
return {
...state,
resources: action.payload
};
case GET_RESOURCE:
return {
...state,
resource: action.payload
};
case DELETE_RESOURCE:
return {
...state,
resources: state.resources.filter(resource => resource._id !== action.payload)
};
case ADD_RESOURCE:
return {
...state,
resources: [action.payload, ...state.resources]
};
default:
return state;
}
}
Parent component that runs a for-loop:
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ResourceCard from './ResourceCard';
class ResourceFeed extends Component {
render() {
const { resources } = this.props;
return resources.map(resource => <ResourceCard key={resource._id} resource={resource} />)
}
}
ResourceFeed.propTypes = {
resources: PropTypes.array.isRequired
}
export default ResourceFeed;
And the component above contains this parent:
<ResourceFeed resources={resources}/>

Answer 1

Issue is here:
const mapStateToProps = state => ({
auth: state.auth,
resource: state.resource // <========== in this line
});
In ResourceCard component you are passing the resource props from two places, one from parent component and one from redux store, that's why.
Your component is expecting the resource value from parent, so remove this line:
resource: state.resource