Не удалось передать индекс дочернему компоненту в реакции. js

Question

У меня есть эта переменная "cardComponent" в моем родительском компоненте. Он передает информацию из базы данных в мой дочерний компонент (InfoCard) на основе пользовательского ввода "drinkChoice".

  let cardComponents = drinks.map((drink, index) =>{
    if (drink.type === drinkChoice || drinkChoice === 'All') {
      return (<InfoCard drinks={this.state.drinks} i ={ index } />)
    } 
    if (drinkChoice === 'Favorites' && drink.favorite === true) {
      return (<InfoCard drinks={this.state.drinks} i ={ index } />)
    }
    else {
      return console.log("Nothing to report")
    }   })

В моем дочернем компоненте я хочу отображать информацию, указанную c для каждого drink.

export default function InfoCard(props, i) {
  const classes = useStyles();

  return (
    <Card className= {classes.root}>
        title = { props.drinks[i].name }
    </Card>

Если я консольлогирую указанный c индекс (например, console.log (props.drinks [1] .name)), это работает. Но когда я пытаюсь использовать index, я получаю сообщение об ошибке

TypeError: props.drinks [i] не определено

Я почти уверен, что это какая-то глупая проблема синтаксиса, которую я пропускаю но это сводит меня с ума.

Answer 1

Реагирующие функциональные компоненты принимают только один аргумент, props. Вы определили, что ваш компонент будет иметь дополнительный компонент, который он никогда не получит.

Это должно быть:

export default function InfoCard(props) {
  const classes = useStyles();
  const { drinks, i } = props;

  return (
    <Card className= {classes.root}>
      title = { drinks[i].name }
    </Card>
  );
}

или использование деструктуризации объекта в сигнатуре функции

export default function InfoCard({ drinks, i }) {
  const classes = useStyles();

  return (
    <Card className= {classes.root}>
      title = { drinks[i].name }
    </Card>
  );
}

Усовершенствованный API может состоять в том, чтобы вместо этого просто передавать заголовок как реквизит.

parent

<InfoCard title={this.state.drinks[index].name} />

child

export default function InfoCard({ title }) {
  const classes = useStyles();

  return (
    <Card className= {classes.root}>
      title = { title }
    </Card>
  );
}