Реагировать на вложенный интеллектуальный компонент с избыточностью - состояние не отображается на реквизиты

Question

Я создаю счетчик напитков, который будет подсчитывать количество напитков, потребляемых в рамках проекта по изучению лексики.

У меня есть начальное состояние, в котором есть свойство напитков, содержащее коллекцию напитков и ихтекущий счет:

//State

{
  drinks: {
    coffee: 0,
    water: 0,
  }
  //...
}

Я создал Counter презентационный компонент:

import React from 'react';
import PropTypes from 'prop-types';

import Button from './Button';

const ucFirst = string => string.charAt(0).toUpperCase() + string.slice(1);

const Counter = ({name, count, onIncrement, onDecrement}) => (
	<div className="counter">
		<h2>{ucFirst(name)}</h2>
		<span>{count}</span>
		<Button onClick={() => {onIncrement(name)}}>+</Button>
		<Button onClick={() => {onDecrement(name)}}>-</Button>
	</div>
);

Counter.propTypes = {
	name: PropTypes.string.isRequired,
	count: PropTypes.number.isRequired,
	onIncrement: PropTypes.func.isRequired,
	onDecrement: PropTypes.func.isRequired,
}

export default Counter;

За ним следует DrinkCounter компонент контейнера:

import { connect } from 'react-redux'
import { incrementDrink, decrementDrink } from '../actions'
import Counter from '../components/Counter'

const mapStateToProps = (state, ownProps) => ({
	count: state.drinks[ownProps.drink],
	name: ownProps.drink
})

const mapDispatchToProps = dispatch => ({
	onIncrement: drink => dispatch(incrementDrink(drink)),
	onDecrement: drink => dispatch(decrementDrink(drink))
})

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(Counter)

Это работает, как и ожидалось, если я добавлю

<DrinksContainer name="coffee" />

в мой App компонент.

Теперь это гдепроблема начинается, я хочу создать еще два компонента, один презентационный и один контейнер, который будет сопоставлять ключи моего drinks объекта и выводить DrinkCounter для каждого, у меня есть следующий код, но я получаю ошибку "ОшибкаТип реквизита: Реквизит name помечен как обязательный в Counter, но его значение равно undefined "

Вот List контейнер:

import React, {Fragment} from 'react'
import PropTypes from 'prop-types'
import DrinkCounter from '../containers/DrinkCounter'

const List = ({drinks}) => {
  return (
	<Fragment>
	  {
			Object.keys(drinks).map(
				(drink, index) => (<DrinkCounter name={drink} key={index} />)
			)
		}
	</Fragment>
  )
}

List.propTypes = {
	drinks: PropTypes.object.isRequired
}

export default List

и вот контейнер DrinksList:

import React from 'react';
import {connect} from 'react-redux';
import List from '../components/List';

const mapStateToProps = state => ({
	drinks: state.drinks	
})

export default connect(mapStateToProps)(List);

Может кто-нибудь объяснить, где я иду не так?

Answer 1

Я выяснил проблему, в компоненте List я даю неправильную опору DrinkCounter Я передаю name, когда на самом деле это должно быть drink.