Используйте состояние с объектами в качестве параметров в выпадающем меню: РЕАКТ

Question

Создание фиктивного сайта с несколькими функциональными аспектами.Просто чтобы прояснить, я начал изучать React неделю назад, поэтому будьте добры с вашими ответами.Спасибо!

Изначально в App.js было создано состояние, позволяющее мне добавлять и удалять клиентов.(как банальный список дел)

Теперь, используя другой компонент, где я могу «добавить урок», я хочу иметь выпадающий селектор, где я могу выбрать одного из существующих клиентов из другого состояния в качестве моеговариант.Я создал все, что требует ввода, и console.log () показывает, что все проходит нормально.Тем не менее, я не могу отобразить параметры раскрывающегося списка в качестве существующих клиентов, поэтому я могу добавить урок в другом состоянии.Чтобы уточнить, у меня есть 2 состояния, клиенты и уроки (с существующими клиентами).

Вот мой App.js

import React, { Component } from 'react'
import Clients from './components/Clients'
import AddClient from './components/AddClient'
import NavBar from './components/NavBar'
import AddLesson from './components/AddLesson'

    class App extends Component {
      state = {
        clients : [
          {id : 1 , name : 'bob', price : 30},
          {id : 2 , name : 'mary', price : 40},
          {id : 3 , name : 'greg', price : 45}
        ],
        lessons : [
          {id: null, name: '', time: null}
        ]
      }

      deleteClient = (id) => {
        let clients = this.state.clients.filter(client => {
          return client.id !== id
        })
        this.setState({
          clients: clients
        })
      }

      addClient = (newClient) => {
        newClient.id = Math.random();
        let clients = [...this.state.clients, newClient];
        clients.sort((a, b) => a.name.localeCompare(b.name))
        this.setState({
            clients: clients,
        })
      }

      addLesson = (newLesson) => {
        newLesson.id = Math.random(); 
        let lessons = [...this.state.lessons, newLesson];
        this.setState({
            lessons: lessons,
        })
        console.log(lessons)
      }

      render() {
        return (
          <div className="App">
            <NavBar/>
            <Clients clients={this.state.clients} deleteClient={this.deleteClient}/>
            <AddClient addClient={this.addClient}/>
            <AddLesson addLesson={this.addLesson}/>
          </div>
        );
      }
    }

    export default App;

Вот AddLesson.js

import React, {Component} from 'react'

class AddLesson extends Component {
    state = {
        lessons: [
            {id : null, name: '', time: null}
        ]
    }

    handleChange = (e) => {
        this.setState({
            [e.target.id] : e.target.value
        })
    } 

    handleSubmit = (e) => {
        e.preventDefault();
        this.props.addLesson(this.state);
        e.target.reset();
    }

    render() {
        return (
            <div className="text-center">
                <h2>Add a lesson</h2>
                <form onSubmit={this.handleSubmit}>

                    <select name="lesson_client">
                        <option>{this.props.clients}</option>
                    </select>

                    {/* <label htmlFor="name">Client Name: </label>
                    <input type="text" id="name" onChange={this.handleChange}/><br/>
                    <label htmlFor="time">Lesson Duration (in hours): </label>
                    <input type="text" id="time" onChange={this.handleChange}/><br/>
                    <button className="btn btn-primary">Add Client</button> */}
                </form>
            </div>
        )
    }
}

export default AddLesson

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

Answer 1

Вам нужно перебрать клиентов и отобразить их.

<select onChange={(e) => this.handleChange(e)} name="lesson_client">
  {this.props.clients.map(client => <option key={client.id} value={client.price}>{client.name}</option>)}
</select>

Вы можете прослушать handleChange, чтобы прочитать выбранное значение. (Примечание: я изменил e.target.id на e.target.name, поскольку в теге select нет идентификатора attr)

handleChange = (e) => {
  this.setState({
    [e.target.name] : e.target.value
  })
} 

И я также заметил, что вы не передаете clients компоненту AddLesson. Пожалуйста, передайте его для работы кода.

<AddLesson clients={this.state.clients} addLesson={this.addLesson}/>