Adding a value to a table from two different arrays with objects?

Question

JavaScript

There are two arrays: arr1 and arr2.
Each of the arrays consists of objects. The arr1 array consists of objects of the form:

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

The arr2 array consists of objects of the form:

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

It is necessary to replace the numerical value of the type field for all objects in the arr1 array with the corresponding value from the arr2 array (by the id field). Output the values ​​of the type and name fields from the arr1 array to the table.
Those. the result should be:

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

MainTable.jsx
Tried to iterate over two arrays at once:

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>
    );
  }
}

Here, instead of the arrays arr1 and arr2, the arrays are massMedia and mediaType.
TableRow.jsx
Can't get it to display the right values ​​in a row

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} />
  );
})}