Не получается передать props.children

161

25 декабря 2021, 05:40

Не получается передать props.children, его просто не видит компилятор и выдает ошибку TypeError: props.children is not a function

<ItemList
    onItemSelected={this.onPersonSelected}
    getData={this.swapiService.getAllPersons}>
    {(i) => (
      `${i.name} (${i.birthYear})`
    )}
  </ItemList>

Эту функцию передаю в компоненту как children В самой компоненте есть функция, которая использует ее для отобрадения label

const renderItems = arr => {
return arr.map(item => {
  const { id } = item
  const label = props.children(item)
  return (
    <li
      className="list-group-item"
      key={id}
      onClick={() => onItemSelected(id)}
    >
      {label}
    </li>
  );
});

Я ломаю голову 2й час и не понимаю в чем заключается ошибка....

Answer 1

В компаненте выше (App) удали или закоменть этот код и все заработает

<div className="row mb2"> 
          <div className="col-md-6"> 
            <ItemList 
                onItemSelected={this.onPersonSelected} 
                getData={this.swapiService.getAllPlanets} 
                renderItem = {(item) => item.name} 
            /> 
          </div> 
          <div className="col-md-6"> 
            <PersonDetails personId={this.state.selectedPerson} /> 
          </div> 
        </div> 
 
        <div className="row mb2"> 
          <div className="col-md-6"> 
            <ItemList 
                onItemSelected={this.onPersonSelected} 
                getData={this.swapiService.getAllStarships} 
                renderItem = {(item) => item.name} 
            /> 
          </div> 
          <div className="col-md-6"> 
            <PersonDetails personId={this.state.selectedPerson} /> 
          </div> 
        </div>`

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Начало перемещения объекта из случайно выбранной точки path SVG

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

112

javascript

Консоль NodeJS не реагирует на ввод команд

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

133

javascript

Js не выводит полученные данные в leaflet popup

javascript

Как запретить прокрутку контенту, а оверлею разрешить [закрыт]

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском