React element ui что передавать в custom template?

Question

[Emjey]

Вот докумантация там есть Custom template,

<AutoComplete
      className="my-autocomplete"
      icon="edit"
      placeholder="Please input"
      value={this.state.value}
      fetchSuggestions={this.querySearch.bind(this)}
      customItem={this.props.customItem}
      onSelect={this.handleSelect.bind(this)}
    ></AutoComplete>

и такой момент, передаю в customItem компонент, получаю такую ошибку понимаю ошибку, с английским вроде не так всё плохо, но всё равно не понимаю как это сделать, то есть как в строке или функции указать, как я хочу чтоб отображался html

Comments

[Антон Спирин]

Видимо дело в том, что вы туда передаете. Жалуется, что объект.
Скиньте код customItem. Видимо, проблема в нем.

[Emjey]

Антон Спирин, пробовал разное передавать, пока что вот

import React, { Component } from 'react'

class SearchItem extends Component {
  render() {
    return (
      <div>
        <p>test</p>
      </div>
    )
  }
}

export default SearchItem

[Антон Спирин]

Emjey, А в this.props как SearchItem передаете?

[Emjey]

Антон Спирин, просто импорчу компонент :D, в этом собственно и вопрос, как правильно это сделать :)

[Emjey]

Антон Спирин, customItem={<SearchItem results={ results } />}

[Антон Спирин]

Emjey, надо так:
customItem={SearchItem}
A SearchItem должен рендерить свойства index, item.

[Emjey]

Антон Спирин, работает, спасибо огромное

[Антон Спирин]

Emjey, библиотека передает свойства item и index, которые ваш компонент должен рендерить.
допустим fetchSuggestions возвращает массив строк.
Тогда ваш компонент должен выглядеть примерно так.

import React, { Component } from 'react';

class SearchItem extends Component {
  render() {
    const { index, item } = this.props;
    return (
      <div key={index}>
        <p>{item}</p>
      </div>
    )
  }
}

export default SearchItem;

[Emjey]

Антон Спирин, да я понял, просто написал быстрее чем подумал :D спасибо большое, ещё раз :)

[Антон Спирин]

Emjey, еще компоненты без state и вызовов жизненного цикла, лучше писать в виде stateless function

import React from 'react';

export default function SearchElement({ index, item }) {
  return (
    <div key={index}>
      <p>{item}</p>
    </div>
  );
}

Answer 1

[Andrew Ghostuhin]

https://github.com/ReactTraining/react-router/issu...