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

Este es el primer código Pero estoy tratando de hacer códigos duplicados a través de map() . Como esto..

 {['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> ) })}

Pero no puedo usar el valor del primer parámetro en el segundo mapa() fetch.userData.map(). Alguien sabe este problema??