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?

Just to be sure, managers[0] is a list of managers? So it is a double nested array? — wentjun
– wentjun, Commented May 6, 2020 at 9:41

Shubham Khatri · Accepted Answer · 2020-05-06 10:18:00Z

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>
   )   
}

edited May 6, 2020 at 10:18

answered May 6, 2020 at 9:45

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Jack23 Over a year ago

Thank you for the answer, manager is a list of object that inside has an array Agemda

Shubham Khatri Over a year ago

Yeah I saw the sample and posted a code around that

Jack23 Over a year ago

Ok I have tried your code, the problem is that in the render manager_id is not defined

Shubham Khatri Over a year ago

Sorry, It should be used from state, this.state.manager_id. I updated the code.

Jack23 Over a year ago

In the Agenda select: Cannot read property 'map' of undefined. Could be the problem that at the beginning the manager_id is not defined?

|

Collectives™ on Stack Overflow

React: Map an array inside object

1 Answer 1

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related