Новый ученик реагирует

Question

Я учусь реагировать и прохожу курс с Codecademy. Теперь я играю самостоятельно и просто пытаюсь что-то подобрать.

Скажем, у меня есть несколько сохраненных списков. Например,

• Спортсмены
• Тренеры
• Команда
• и т. Д.

И у меня есть родительская страница. И я хочу, чтобы пользователь мог искать, скажем, спортсменов в определенном штате или почтовый индекс и т. Д.

Может ли кто-нибудь указать мне правильное направление, чтобы начать. Я предполагаю, что мне нужно использовать реквизит. И если заявления или что-то в этом роде, но быть новым, это все ошеломляет в данный момент.

Если бы кто-то мог помочь мне начать или указать мне, где я могу получить больше информации, это было бы здорово.

Answer 1

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

class Parent extends Component {

  state = {
    state: '',
    postal: ''
  }

  // Search terms from the user
  // You decide how you should get these values
  search(state, postal) {
    this.setState({ state, postal })
  }

  render() {
    return (
      <div className="App">
        {/* Pass your search terms to your child */}
        <MyChild state={ this.state.state } postal={ this.state.postal } />
      </div>
    );
  }
}

Дочерний компонент получит эти значения поиска через реквизиты и проверит, существуют ли они в определенном вами списке.

class Child extends Component {

  constructor(props) {
    super()
  }

  // check if item exists in list
  check() {
    // Get props
    const { state, postal } = this.props
    // Search through list
    return list.find(item => {
      if (state === item.state) { return item.name }
      if (postal === item.postal) { return item.name }
    })
  }

  render() {
    return (
      <div>
        // render the name of the athelete
        <p>{ this.check() }</p>
      </div>
    );
  }
}