title: How do I name my react component to accommodate an element in my nested JSON?
body: <p>I'm using React 16.13.0  I have the following component (src/containers/FormContainer.jsx) ...</p>
  
  <pre><code>class FormContainer extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        defaultCountry: 484,
        countries: [],
        provinces: [],
        newCoop: {
          name: '',
          type: '',
          ...
        },
  
  
      ...
    render() {
      return (
          &lt;form className="container-fluid" onSubmit={this.handleFormSubmit}&gt;
  
              &lt;Input inputType={'text'}
                     title= {'Name'}
                     name= {'name'}
                     value={this.state.newCoop.name}
                     placeholder = {'Enter cooperative name'}
                     handleChange = {this.handleInput}
  
                     /&gt; {/* Name of the cooperative */}
  
              &lt;Input inputType={'text'}
                     title= {'Type'}
                     name= {'type'}
                     value={this.state.newCoop.type}
                     placeholder = {'Enter cooperative type'}
                     handleChange = {this.handleInput}
  
                     /&gt; {/* Type of the cooperative */}
  </code></pre>
  
  <p>My Input copmonent, src/components/Input.jsx, looks like such ...</p>
  
  <pre><code>import React from 'react';
  
  const Input = (props) =&gt; {
      return (
    &lt;div className="form-group"&gt;
      &lt;label htmlFor={props.name} className="form-label"&gt;{props.title}&lt;/label&gt;
      &lt;input
        className="form-input"
        id={props.name}
        name={props.name}
        type={props.type}
        value={props.value}
        onChange={props.handleChange}
        placeholder={props.placeholder}
      /&gt;
    &lt;/div&gt;
  )
  }
  
  export default Input;
  </code></pre>
  
  <p>The issue is I need to submit a POST request where the "type" parameter is submitted as the following JSON ...</p>
  
  <pre><code>{
      "name": "1872",
      "type": {
          "name": "Coworking Space"
      },
      ...
  }
  </code></pre>
  
  <p>How do I name my second input field (the "type" field) such that I can submit my JSON with the proper structure?</p>
  
  <p><b>Edit:</b> The handle input and submit functions ...</p>
  
  <pre><code>  handleFormSubmit(e) {
      e.preventDefault();
      let coopData = this.state.newCoop;
  
      fetch('/coops/',{
          method: "POST",
          body: JSON.stringify(coopData),
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
        }).then(response =&gt; {
          response.json().then(data =&gt;{
            console.log("Successful" + data);
          })
      })
    }
    handleClearForm() {
      // Logic for resetting the form
    }
    handleInput(e) {
         let value = e.target.value;
         let name = e.target.name;
     this.setState( prevState =&gt; ({ newCoop :
          {...prevState.newCoop, [name]: value
          }
        }), () =&gt; console.log(this.state.newCoop))
    }
  </code></pre>