CODEWITHSUNDEEP
javascriptarraysreactjsdictionaryecmascript-6
Sam
Sam

Reputation: 2331

ES6 map function for tuples/2d arrays

I'm trying to write a map function to return a navbar. I have an array/dictionary that I want to loop through using the map function that looks something like

[['Text', './link.html'],
 ['Text2', './link2.html'],
 ['Text3', './link3.html']]

or else

{'Text', './link.html',
 'Text2', './link2.html',
 'Text3', './link3.html'}

Whatever type I need to loop through doesn't matter, I just want to loop through sets of 2, ideally I'd want to use tuples, but it doesn't look like that's an option from what I've read.

When looking at solutions that use the dict/object method, I don't know how to access both the key and the value. For ex.

var NavBar = (props) => {

    return (
        <div id="NavMain">
            {Object.keys(props.links).map((link,index) => {
                return <NavBarItem link={link} />
                {/* Where do I access the key? */}
            })}
        </div>
    )}

If I try to map this as a 2d array, my IDE is showing some error lines underneath 'row', 'text' and '/>' in the code below

var NavBar = () => {
      
    return (
        <div id="NavMain">
            {this.props.links.map((row,index) => {
                return <NavBarItem link=row[1] text=row[0] />
            })}
        </div>
    )}

Other solutions I've looked up are really messy. I'm wondering if there's a clean way to use the map function over sets of 2.

Upvotes: 1

Views: 790

Answers (2)

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15688

You can use array destructuring inside the .map() like this:

So assuming you have a data set of an array of arrays:

const arr = [
     ['Text', './link.html'],
     ['Text2', './link2.html'],
     ['Text3', './link3.html']
]

var NavBar = (props) => {
    return(
      <div id="NavMain">
        {arr.map(([text, link]) => {
           return <NavbarItem link={link} text={text}/>
        })}
      </div>
    )
}

We know the first item is text and the second item is link as expected.

See sandbox for working example: https://codesandbox.io/s/stoic-payne-9zdp3

Upvotes: 1

Chiranjib
Chiranjib

Reputation: 1783

You almost had it. Try this:

/*
props.links = {
    'Text' : './link.html',
    'Text2' : './link2.html',
    'Text3' : './link3.html'
}
*/

var NavBar = (props) => {
    return (
        <div id="NavMain">
            {Object.keys(props.links).map((key, index) => {
                return <NavBarItem link={props.links[key]} text={key}  />
            })}
        </div>
    )
}

Upvotes: 0

Related Questions