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

      <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??

>Solution :

Use user[value]

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