Добавление в таблицу значение из двух разных массивов с объектами?

Question

[aznhautroalvyl]

Есть два массива: arr1 и arr2.
Каждый из массивов состоит из объектов. Массив arr1 состоит из объектов вида:

{id: 1, type: 2, name: "Значение1"},
{id: 2, type: 3, name: "Значение2"},
{id: 3, type: 1, name: "Значение3"}

Массив arr2 состоит из объектов вида:

{id: 1, name: "Тип1"}
{id: 2, name: "Тип2"}
{id: 3, name: "Тип3"}

Необходимо в массиве arr1 заменить для всех объектов числовое значение поля type на соответствующее значение из массива arr2 (по полю id). Вывести в таблицу значения полей type и name из массива arr1.
Т.е. в результате должно получиться:

{id: 1, type: "Тип2", name: "Значение1"},
{id: 2, type: "Тип3", name: "Значение2"},
{id: 3, type: "Тип1", name: "Значение3"}

MainTable.jsx
Пробовал сделать перебор сразу двух массивов:

import React, { PropTypes, Component } from 'react';
import TableHeader from './TableHeader';
import TableRow from './TableRow';

const propTypes = {
  initialName: PropTypes.string,
  massMedia: PropTypes.array,
  mediaType: PropTypes.array
};

class MainTable extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <table className='table table-striped table-hover table-bordered'>
        <thead className='table__thead'>
          <TableHeader/>
        </thead>
        <tbody>
        {this.props.massMedia.map(item => {
          this.props.mediaType.map(item1 => {
            return (<TableRow key={item.id} directory={item} directory1={item1}/>);
          });
        })}
        </tbody>
      </table>
    );
  }
}

Здесь вместо массивов arr1 и arr2 массивы massMedia и mediaType.

TableRow.jsx
Не получает сделать так, чтобы выводились нужные значения в строке

import React, { PropTypes, Component } from 'react';
import '../css/style.css';

const propTypes = { 
  key: PropTypes.number,
  directory: PropTypes.object,
  directory1: PropTypes.object
};

class TableRow extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <tr className='table__tr'>
        <td>
          {this.props.directory.type}
        </td>
        <td>
          {this.props.directory1.name}
        </td>
      </tr>
    );
  }
}

Answer 1

[Антон Спирин]

{this.props.massMedia.map(item => {
  const type = mediaType.find(el => el.id === item.type);

  return (
    <TableRow key={item.id} directory={item} directory1={type} />
  );
})}

Comments

[aznhautroalvyl]

Большое спасибо!