React: Map an array inside object

Question

I'm trying to show (in a select) the values of agenda that is an array inside an object.

So what I would to obtain is a process like this: the user select a manager --> the user select the agenda values about this manager (this process in two different select).

My problem is how to process the second choose in the render.

My object is like:

manager:  [{…}]
0:
  12:
  name: "Name1"
  surname: "Surname1"
  agenda: Array(2)
       0: {date: "2020-05-27", start_at: "09:00:00", end_at: "10:00:00"}
       1: {date: "2020-05-27", start_at: "10:00:00", end_at: "11:00:00"}
  length: 2
  __proto__: Array(0)
  __proto__: Object

My code is:

handleChangeManager = (e) => {
      const manager_id = e.target.value;
      console.log("manager_id: ", manager_id)
      this.setState({manager_id : manager_id})
     this.agenda(manager_id)
    }

// I have tried this to recover the agenda's information about the manager choosen. 
    agenda(manager_id)
    {
      let agendas = this.props.managers[0][manager_id].agenda
      let mappingAgenda = agendas && agendas.length && agendas.map((agenda) => (
       console.log(agenda.date)

      ))
    }

render() {
         let managers = this.props.managers
         console.log("manager: ", managers)

<label>Manager</label>
            <div className="bootstrap-select-wrapper">
            <select title="Choose" onChange={(event) => this.handleChangeManager(event)}>
            <option value="" title="Choose" data-content="Cancel <span class='reset-label'></span>"></option>
            {managers && managers.length && Object.entries(managers[0]).map(([k, v]) => (
              <option 
                key={k}  
                value={k}  
                name="manager_id" >
                {v.name} {v.surname}
              </option>
            ))}
            </select>

// so there I should create a select about the agenda (for example allowing the user to choose the date)

How can I do to create a select about the data, after the manager is choosen?

Answer 1

You need to create another Select which will show you the options by populating it based on the selection of manager

Also since the managers is an array, use managers.map instead of Object.entries(manager).map

handleChangeManager = (e) => {
  const manager_id = e.target.value;
  console.log("manager_id: ", manager_id)
  this.setState({manager_id : manager_id})
}

handleChangeAgenda = (e) => {
  const manager = this.props.managers[0][this.state.manager_id];
  const index = e.target.value
  this.setState({agenda : manager.agendas[index]})
}
render() {
   let managers = this.props.managers
   console.log("manager: ", managers)
   const manager_id = this.state.manager_id;
   const selectedManager = manager_id? mangers[0][manger_id];
   const agendas = (selectedManager || {}).agendas;
   return (
        <label>Manager</label>
        <div className="bootstrap-select-wrapper">
          <select title="Choose" onChange={(event) => this.handleChangeManager(event)}>
          <option value="" title="Choose" data-content="Cancel <span class='reset-label'></span>"></option>
          {managers && managers.length && Object.entries(managers[0]).map(([k, v]) => (
            <option 
              key={k}  
              value={k}  
              name="manager_id" >
              {v.name} {v.surname}
            </option>
          ))}
          </select>
          <select title="Choose Agenda" onChange={(event) => this.handleChangeAgenda(event)}>
          <option value="" title="Choose" data-content="Cancel <span class='reset-label'></span>"></option>
          {agendas && agendas.map((v, index) => (
            <option 
              key={k}  
              value={index}  
              name="manager_id" >
              {v.start_at} - {v.end_at}
            </option>
          ))}
          </select>
        </div>
   )   
}