I've encountered an issue while trying to render out a Redux state by mapping through an array of objects. Despite receiving the props successfully, I keep getting an error stating that 'map is not a function'. It seems like the mapping function is being called before the props have been passed into the component. I've attempted using the && method as suggested by others, but all I get back is:
TypeError: myItems.map is not a function
Below is the code snippet causing this problem:
import React, { Component } from 'react';
import { connect } from 'react-redux';
class RandomComponent extends Component {
state = {
myItems: this.props.myItems
}
componentDidUpdate(prevProps, prevState, snapshot) {
console.log('Styles: ', this.props.myItems); // Returns object array
}
render() {
const { myItems } = this.props; // also tried this.state
return (
<ul>
{myItems && myItems.map((item) => {
return <span>Hello.</span>;
})}
</ul>
);
}
}
const mapStateToProps = (state) => ({
myItems: state.getmyItems.myItems
});
export default connect(mapStateToProps)(RandomComponent);