Как отобразить динамический набор div в зависимости от того, сколько индексов у меня есть в массиве - PullRequest
Новая
       5

Как отобразить динамический набор div в зависимости от того, сколько индексов у меня есть в массиве

0 голосов
/ 10 мая 2018

Я создаю Wikipedia Viewer из FCC. Я хочу отобразить набор div в зависимости от того, сколько значений у меня есть в массиве. Примерно так: 

const arrayWithValues= ['1','2','3','4','5'];

Так что для каждого значения в моем массиве я хочу иметь что-то вроде этого: 

//the key is passed as the index of the array
<div key={i}> content here </div>
<div key={i}> content here </div>

Так что мне кажется, что до использования map, но я не помню, как его использовать.

Дело в том, что у меня есть пустой массив, но после поиска пользователя с заданным вводом. Я делаю вызов API, и их результаты помещаются в массив. Я использую реагирование, поэтому у меня есть этот массив в моем состоянии, я хочу получить эти значения и иметь возможность отображать их на странице внутри div (с заданным className и т.д ...)

Ответы [ 3 ]

0 голосов
/ 10 мая 2018 
arrayWithValues.map((val, i) => (<div key={i}>content here</div>));
0 голосов
/ 10 мая 2018

Пиюш ответ на вопрос. Если вы хотите следовать архитектуре React до буквы, конечный результат будет выглядеть примерно так: 

class ItemList extends React.Component {
  const arrayWithValues= ['1','2','3','4','5'];

  render() {
    let listOfValues = arrayWithValues.map((value) => {
      return (<Item arrayValue={ value } />)
    });

    return (
      {listOfValues}
    );
  }

}
export default ItemList;


class Item extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (<div key={this.props.arrayValue}> content here </div>);
  }
}
export default Item;

РЕДАКТИРОВАТЬ: Я настроил это в соответствии с обратной связью.

0 голосов
/ 10 мая 2018

Вы можете использовать карту таким образом, чтобы отобразить набор div 

arrayWithValues.map((value, i) => {
 return (<div key={i}> content here </div>)
})
...