How to use map() First map() parameter in Second map() method?

Question

      <div className='login'>
          <p style={{paddingLeft: '30px'}}>login</p>
          <ul>
          {fetch.userData && fetch.userData.map((user, key)=><li key={key}>{user.login}</li>)}
          </ul>  
     </div>
     <div className='type'>
          <p style={{paddingLeft: '30px'}}>type</p>
          <ul>
          {fetch.userData && fetch.userData.map((user, key)=><li key={key}>{user.type}</li>)}
          </ul>  
     </div>
     <div className='url'>
          <p style={{paddingLeft: '30px'}}>url</p>
          <ul>
          {fetch.userData && fetch.userData.map((user, key)=><li key={key}>{user.url}</li>)}
          </ul>  
     </div>

This is Firtst code But I am trying to do duplicate codes through map() . Like this..

{['login', 'type', 'url'].map(value => {
          return (
        <div className={value}>
          <p style={{paddingLeft: '30px'}}>{value}</p>
          <ul>
          {fetch.userData && fetch.userData.map((user, key)=><li key={key}>{user.`${value}`}</li>)}
          </ul>  
        </div>
          )
        })}

But I can't use First Parameter value in Second map() fetch.userData.map(). Any one know this problem??

Answer 1

Use user[value]

{fetch.userData && fetch.userData.map((user, key)=><li key={key}>{user[value]}</li>)}

Answer 2

I hope this example will help clear things up for you/is what you are looking for.

let str = "This is a cool string!"
let splitArr = str.split(" ").map(x => x.split("").map(y => y + "1")));
console.log(splitArr)

Would produce the following output:

[
  [ 'T1', 'h1', 'i1', 's1' ],
  [ 'i1', 's1' ],
  [ 'a1' ],
  [ 'c1', 'o1', 'o1', 'l1' ],
  [
    's1', 't1',
    'r1', 'i1',
    'n1', 'g1',
    '!1'
  ]
]