Can I combine these two array into one object using React and Javascript?
<p>While working on my application I found out that the way I have it set up now is not really ideal. I am currently saving the values of two dynamicly created input fields in two seperate arrays. Now as I understand this is not really smart to do since both input fields have the same index and actually belong together. </p>

<p>Now I was wondering how I can change my code so I can save both values in the same Object.</p>

<p>This is my code for my dynamic form:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>class MediaInput extends React.Component {
  render() {
    const linkName = `link${this.props.index}`;
    const contentName = `content${this.props.index}`;

    return (
      &lt;div&gt;
      &lt;ControlLabel&gt;Media (optional)&lt;/ControlLabel&gt;
        &lt;input
        onChange={(event) =&gt; this.props.handleChangeUrl(event, this.props.index)}
        name={ linkName }
        value={ this.props.mediaUrls[this.props.index]}
        className="form-control"
        placeholder="Add your media url. We accept YouTube, Vimeo and SoundCloud links" 
        type="text" 
        /&gt;
        &lt;input
        name={ contentName }
        onChange={(event) =&gt; this.props.handleChangeContent(event, this.props.index)}
        value={ this.props.mediaContents[this.props.index]}
        className="form-control" 
        placeholder="Add your media content"
        type="text" 
        /&gt;
    &lt;/div&gt;
    );
  }
}</code></pre>
</div>
</div>
</p>

<p>This is my current state:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    this.state ={
      mediaFields: [],
      content: [],
      mediaUrls: [ null, null, null ],
      mediaContents: ['', '', ''],
    };</code></pre>
</div>
</div>
</p>

<p>These are my functions: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// Add/remove media fields 

  add() {
    event.preventDefault();
    const mediaFields = this.state.mediaFields.concat(MediaInput);
    if (i &lt; 3) {
      this.setState({ mediaFields });
      i++
    } else {
      Bert.alert('Only 3 media links are allowed', 'danger');
    }
  }

  remove() {
    event.preventDefault();
    const lastElement = this.state.mediaFields.pop();
    const mediaFields = this.state.mediaFields;
    this.setState({ mediaFields });
    i--
  }

// Handle change media fields 

  handleChangeUrl(e, index) {
    // Shallow copy of array
    const mediaUrls = this.state.mediaUrls.slice();
    let url = e.target.value
    if (!/^https?:\/\//i.test(url)) {
      url = 'http://' + url;
    }

    mediaUrls[index] = url;
      this.setState({ mediaUrls});
  }

  handleChangeContent(e, index) {
    // Shallow copy of array
    const mediaContents = this.state.mediaContents.slice();
    mediaContents[index] = e.target.value;
      this.setState({ mediaContents });
  }</code></pre>
</div>
</div>
</p>

<p>And this is the part of the form where I add the input fields:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>[...]
 
const mediaFields = this.state.mediaFields.map((Element, index) =&gt; {
      return &lt;Element key={ index } index={ index } mediaUrls={this.state.mediaUrls} mediaContents={this.state.mediaContents} handleChangeUrl={this.handleChangeUrl} handleChangeContent={this.handleChangeContent} /&gt;
  })    

 
[...]


&lt;div&gt;
    { mediaFields }
    &lt;Button onClick={ () =&gt; this.add() }&gt;Add media field&lt;/Button&gt;
    &lt;Button onClick={ () =&gt; this.remove() }&gt;Remove media field&lt;/Button&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>As you can see I have almost the same function and I understand that this is not great, so I want to learn how I can do it better.</p>

<p>I want to save both the values in the same Object. Like so: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const mediaContent = [ link1: content1, link2: content2, link3: content3 ]</code></pre>
</div>
</div>
</p>

<p>Hope someone can push me in the right direction.</p>