React Hooks: how to properly map an array with nested arrays and objects inside a select element?(new coder) [duplicate]

Question

The objective is to create a select element that maps out all the names as drop downs with react hooks, for some reason it's only rendering the first element and getting undefined errors, any code references can be provided

import React from 'react';
import styles from './style.css'

const Traveler = () => {
    const travelers = [
        { title: "What kind of traveler are you?", name: [
            "Adrenaline Addicts", "Culture Lovers", "Aquatic adventures", "Beach enthusiasts", "Adventure seekers",
            "Party hoppers", "Motor fans"
        ] }
    ]

    return (
        <React.Fragment>
            <select type="text" name="Transportation" className={styles.select}>
                <option value="Transportation" className={styles.field} value={travelers[0].title}></option>  
                { travelers.map((item, index) => {
                    return(
                        <option>{item[0].name[index]}</option>
                    );
                })
            }
            </select> 

        </React.Fragment>
    );

}

export default Traveler;
````

You're running map on travelers--there's only one. Are you trying to map over the array in the "name" property? — Dave Newton
– Dave Newton, Commented Jan 31, 2020 at 17:52

Scorpion-Prince · Accepted Answer · 2020-01-31 17:51:43Z

2

The issue seems to be with the mapping over the array. You would need two map functions, one for the travelers array and the second one which maps over the name array inside each traveler. It would look something like this.

{ travelers.map((traveler) => {
  return(
    <option value="Transportation" className={styles.field} value={traveler.title}></option>  
          {traveler.name.map((name) => <option>{name}</option>}
  );
})

answered Jan 31, 2020 at 17:51

Scorpion-Prince

3,6443 gold badges21 silver badges24 bronze badges

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

2 Comments

Jorge de la Torre Over a year ago

@goto1 you're absolutely right.I mean that we're using functional components like we do on hooks instead of class components.

Jorge de la Torre Over a year ago

@davenewton Yes. trying to map over the name property, looks like it's about using a second map function to resolve.

Collectives™ on Stack Overflow

React Hooks: how to properly map an array with nested arrays and objects inside a select element?(new coder) [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related