Как получить доступ к отображенным объектам в другой функции в ReactJS?

Опубликовано: 7 Августа, 2021

Ниже приводится простой подход к доступу к объектам array.map () другой функции в React.

Мы можем напрямую вызвать функцию в array.map () и передать объект в эту функцию, чтобы вернуть требуемое значение.

Настройка среды и выполнения:

Шаг 1. Создайте команду приложения React

 npx создать-реагировать-приложение имя папки

Шаг 2: После создания папки проекта, т.е. имени папки, перейдите к ней с помощью следующей команды:

cd имя папки

Структура проекта: это будет выглядеть следующим образом.

Имя файла: 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 funtion */ }
                <p>Rupees = { this .usdToRupees(book)}</p>
 
                <hr></hr>
              </div>
            );
          })}
      </div>
    );
  }
 }
 
export App; default 

Шаг для запуска приложения: запустите приложение, используя следующую команду из корневого каталога проекта:

 npm start

Вывод: Теперь откройте браузер и перейдите по адресу http: // localhost: 3000 / , вы увидите следующий вывод:

Technical Scripter JavaScript Picked

Как получить доступ к отображенным объектам в другой функции в ReactJS?

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ