El siguiente es el enfoque simple para acceder a los objetos de array.map() a otra función en React
Podemos llamar directamente a la función en array.map() y pasar el objeto en esa función para devolver el valor requerido.
Configuración del entorno y ejecución:
Paso 1: crear el comando de la aplicación React
npx create-react-app foldername
Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:
cd foldername
Estructura del proyecto: Tendrá el siguiente aspecto.
Nombre de archivo: App.js
Javascript
import React, { Component } from "react";
class App extends Component {
constructor(props) {
super(props);
this.state = {
books: [
{ title: "Book Title 1", USD: 10 },
{ title: "Book Title 2", USD: 20 },
],
};
}
// We want to pass books object in this function
// and return Rupees value
usdToRupees = (book) => {
return book.USD * 75;
};
render() {
return (
<div>
{this.state.books &&
this.state.books.map((book) => {
return (
<div>
<h2>{book.title}</h2>
<p>USD = {book.USD}</p>
{/* We are passing book object to the function */}
<p>Rupees = {this.usdToRupees(book)}</p>
<hr></hr>
</div>
);
})}
</div>
);
}
}
export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Publicación traducida automáticamente
Artículo escrito por pratikraut0000 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA