Puede acceder al value según el index de la etiqueta como se muestra a continuación. Puede usar un sistema de cuadrícula CSS para mostrar una vista de dos columnas.

 export default function App() { const result = [ { name: "shanu", label: ["ak", "pk", "plk", "k"], value: [1, 2, 3, 5] } ]; return result.map((el) => { return ( <div> <div className="header">{el.name}</div> <div className="grid-container"> {el.label.map((e, index) => { return ( <div className="grid-item" style={{ textAlign: index % 2 === 0 ? "left" : "right" }} > {e} : {el.value[index]} </div> ); })} </div> </div> ); }); }

Los siguientes estilos organizarán la cuadrícula alineando a la derecha la segunda columna.

 .header { color: #ffffff; background-color: #4473c4; padding: 10px 20px; } .grid-container { display: grid; grid-template-columns: auto auto; } .grid-item { padding: 10px 20px; color: #ffffff; background-color: #91cf50; }

Salida HTML

Zona de pruebas de código

Si desea vincular valor y etiquetar de esta manera:

 ak => 1 pk => 2 plk => 3 k => 5

Sería una mejor práctica cambiar su estructura de datos y moverlos a un lado. Evita la ejecución en los casos en que se define la label[x] , pero el value[x] no lo es:

 export default function App() { const result = [ { name: "shanu", items: [ { label: "ak", value: 1 }, { label: "pk", value: 2 }, { label: "plk", value: 3 }, { label: "k", value: 5 }, ], } ]; return result.map((el) => { return ( <div> <h1>{el.name}</h1> <div className="vart"> <div> {el.items.map((e, index) => { return ( <p> {e.label} : {e.value} </p> ); })} </div> </div> </div> ); }); }