title: React dynamic forms that are nested
body: <p>I'm <strong>soooo</strong> close to getting this to work but just can't seem to wrap my head around this.</p>
  
  <p>I have a form that's supposed to submit to a json file with the following structure: </p>
  
  <pre><code>    {
        title: '',
        content: [
          {className: '', body: ''}
        ]
      }
  </code></pre>
  
  <p>I'm able to set the state for the title no problem, as well as the first object in the content array. I think I need to create a loop or something? Below is my full component. </p>
  
  <pre><code>import React, { Component } from 'react';
  
  class AddEditPage extends Component {
    constructor(props) {
      super(props)
      this.state = {
        title: '',
        content: [
          {className: '', body: ''}
        ]
      }
      this.addInput = this.addInput.bind(this);
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
      this.handleNestedChange = this.handleNestedChange.bind(this);
    }
  
    handleChange(e) {
      const value = e.target.value
      this.setState({
        [e.target.name]: value
      })
    }
  
    handleNestedChange(e) {
      const value = e.target.value
      console.log(e.target.id)
      this.setState({
  
      })
  
    }
  
    handleSubmit(e) {
      e.preventDefault();
      console.log(this.state)
    }
  
    addInput() {
      const newInput = { className: '', body: ''}
      this.setState({content: this.state.content.concat(newInput)});
    }
  
  
    render() {
      const contentInputs = this.state.content.map((content, i)=&gt; {
       return (
          &lt;div key={i}&gt;
            &lt;input 
              type="text" 
              name="className"
              id={`${i}`} 
              placeholder="Class name"
              onChange={this.handleNestedChange}
            /&gt;
            &lt;input 
              type="text" 
              name="body" 
              placeholder="Body"
              id={`${i}`}
              onChange={this.handleNestedChange}
            /&gt;
          &lt;/div&gt;
        )
      })
  
      return (
        &lt;div&gt;
          &lt;h2&gt;New Page&lt;/h2&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;
              &lt;input 
              type="text" 
              name="title" 
              placeholder={this.state.title || `Enter the title`}
              onChange={this.handleChange} 
              /&gt;
            &lt;h3&gt;Content&lt;/h3&gt;
              {contentInputs}
              &lt;button onClick={this.addInput}&gt;Add&lt;/button&gt;
            &lt;input type="submit" /&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default AddEditPage;
  </code></pre>
  
  <p> &amp; praise for the answer haha</p>