Can't load mock data while mounting component - reactjs

Question

I have a component that should render a list of mock items. The initial value is an empty array, and I want to load mock data during component render. But it doesn't work correctly - list in component is empty when I try to check it out by printing in console, but Redux Devtools shows that it is not. What am I doing wrong?
Component
import React, { Component } from 'react';
import TagsBlock from './TagsBlock';
import ActionButton from './ActionButton';
import { connect } from 'react-redux';
import { actionLoadCoctails, actionToggleDetail } from '../actions/actionCreators';
class ResultsCoctails extends Component {
componentDidMount() {
this.props.actionLoadCoctails();
}
list = this.props.loadCoctails.map(({ img, name, tags}, key) => {
const showDetail = (e) => {
e.preventDefault();
this.props.actionToggleDetail();
}
return (
<div
className="item"
key={`coctail-${key}`}
>
<a
href="#"
onClick={(e) => showDetail(e)}
>
<div className="img">
<img src={img} alt="error" />
</div>
<div className="desc">
<div className="name">{name}</div>
<TagsBlock tags={tags}></TagsBlock>
</div>
</a>
</div>
)
});
render() {
return (
<div className="result-coctails">
<div className="block">
{this.list}
</div>
<ActionButton txt="morе"></ActionButton>
</div>
)
}
}
export default connect(state => ({
loadCoctails: state.loadCoctails
}), { actionLoadCoctails, actionToggleDetail })(ResultsCoctails);
Reducer
import { LOAD_COCTAILS } from '../constants';
const INIT_COCTAILS = [
{
img: 'some url',
name: 'Cocktail Mary',
tags: ['one', 'two', 'three'],
},
{
img: 'some url',
name: 'White Russian',
tags: ['one', 'two', 'three'],
},
{
img: 'some url',
name: 'Cocktail Mary',
tags: ['one', 'two', 'three'],
},
{
img: 'some url',
name: 'White Russian',
tags: ['one', 'two', 'three'],
},
{
img: 'some url',
name: 'Cocktail Mary',
tags: ['one', 'two', 'three'],
}
];
export const loadCoctails = (state = [], { type }) => {
switch(type) {
case LOAD_COCTAILS:
return {
...state, ...INIT_COCTAILS
}
default:
return state;
}
}
ActionCreator
import {
LOAD_COCTAILS,
TOGGLE_DETAIL,
LOAD_DETAIL
} from '../constants';
export const actionLoadCoctails = () => {
return {
type: LOAD_COCTAILS
}
}
export const actionToggleDetail = () => {
return {
type: TOGGLE_DETAIL
}
};
export const actionLoadDetail = (img, name, tags, deg, txt) => {
return {
type: LOAD_DETAIL,
img,
name,
tags,
deg,
txt
}
};

Answer 1

The problem is that the map() function can't work with objects - so, we should make an array and do map() with it:
const listArray = Object.values(this.props.loadCoctails);
const list = listArray.map(({ img, name, tags}, key) => {
.....