Создание динамических карт из массива - PullRequest
Новая
       40

Создание динамических карт из массива

1 голос
/ 06 июня 2019

Я пытаюсь создать 3, используя один и тот же компонент под названием «месяц 1», «месяц 2» и «месяц 3», карты содержат таблицу, и мне нужно добавить заголовок для каждой карты из массива.

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

App.JS

function App() {
  const months = ['month 1', 'month 2', 'month 3'];
  return (
    <div className='App'>
      <NavBar/>
      <>
        {months.map(month => <SimpleCard> {month}</SimpleCard>)}
      </>
      <Container>
        <Button variant="contained" color="primary" className='submitButton' id='submitButton'>
          Submit
        </Button>
      </Container>
    </div>

  );
}


card.JS

export default function SimpleCard() {
  const classes = useStyles();
  return (
    <Card className={classes.card}>
      <CardContent>
        <Typography className={classes.title} variant="h5" component="h2">
          {/*This is where the month should be displayed*/}

        </Typography>
        <Typography variant="body2" component="p">
          <Table/>
        </Typography>
      </CardContent>
    </Card>
  );
}

Мне нужно, чтобы месяцы отображались внутри карты, над таблицей

1 Ответ

0 голосов
/ 06 июня 2019

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

export default function SimpleCard(props) {
  const classes = useStyles();
  return (
    <Card className={classes.card}>
      <CardContent>
        <Typography className={classes.title} variant="h5" component="h2">
          {props.children}
        </Typography>
        <Typography variant="body2" component="p">
          <Table/>
        </Typography>
      </CardContent>
    </Card>
  );
}

Для вашего случая использования, я думаю, что было бы лучше передать заголовок в качестве точного заголовка проп

{months.map(month => <SimpleCard title={month} />)}

и визуализировать его 

{props.title}
...