title: Pass form input values to another component React
body: <p>Currently practicing state and props in React and I have a rather large component which I am trying to split into a few smaller components, however I'm not sure how to pass data from one component to another. </p>
  
  <p>The component currently contains a form with multiple inputs and renders them onSubmit. As far as I understand, the best way to do this is to put the form in it's own component and use props to then pass in the state of the parent component. But how can this be done with multiple inputs and ensure the handleChange and handleSubmit methods work.</p>
  
  <p>Being new to React, i'm still confused as to how to call a method like onChange when it's defined in one component and called in another.</p>
  
  <p>Here's what i've got so far (the one big component...):</p>
  
  <pre><code>export default class App extends Component {
      constructor(props){
        super(props);
        this.state = {
          post: {
            name: "",
            description: "",
            level: "Junior",
            salary: 30000
          },
          jobs: []
        };
      }
  
    handleChange = e =&gt; {
      const { name, value } = e.target;
  
      this.setState(prevState =&gt; ({
        post: { ...prevState.post, [name]: value }
      }));
    };
  
    handleSubmit = e =&gt; {
      e.preventDefault();
  
      this.setState(prevState =&gt; ({
        jobs: [...prevState.jobs, prevState.post],
        post: { name: "", description: "", level: "", salary: 30000 }
      }));
    };
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;nav&gt;
            &lt;button className="btn btn-primary"&gt;Post it!&lt;/button&gt;
          &lt;/nav&gt;
  
  
           * This is the section i've been trying to put in a separate component... *
  
  
          &lt;div className="form-container"&gt;
            &lt;form&gt;
              &lt;div className="form-group"&gt;
                &lt;input
                  className="col-12 form-control"
                  name="name"
                  onChange={this.handleChange}
                  type="text"
                  value={this.state.post.name}
                  placeholder="post name"
                /&gt;
              &lt;/div&gt;
              &lt;div className="form-group"&gt;
                &lt;textarea
                  className="col-12 form-control"
                  name="description"
                  onChange={this.handleChange}
                  type="text"
                  value={this.state.post.description}
                  placeholder="post description"
                &gt;&lt;/textarea&gt;
              &lt;/div&gt;
              &lt;div className="form-group"&gt;
                &lt;input
                  className="col-12 form-control"
                  name="salary"
                  onChange={this.handleChange}
                  type="number"
                  value={this.state.post.salary}
                  placeholder="post salary"
                /&gt;
              &lt;/div&gt;
              &lt;div className="form-group"&gt;
                &lt;select
                  className="form-control"
                  onChange={this.handleChange}
                  name="level"
                  value={this.state.post.level}&gt;
                    &lt;option&gt;Junior&lt;/option&gt;
                    &lt;option&gt;Mid&lt;/option&gt;
                    &lt;option&gt;Senior&lt;/option&gt;
                    &lt;option&gt;Any&lt;/option&gt;
                &lt;/select&gt;
               &lt;/div&gt;
              &lt;button className="btn btn-primary" onClick={this.handleSubmit}&gt;Submit&lt;/button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
  
  
  
          &lt;div className="post-container"&gt;
            &lt;ul&gt;
              {this.state.jobs.map((job, index) =&gt; (
                &lt;li key={index}&gt;
                  &lt;ul className="post-tile"&gt;
                    &lt;li className="post-tile-name"&gt;{job.name}&lt;/li&gt;
                    &lt;li className="post-tile-level"&gt;{job.level}&lt;/li&gt;
                    &lt;li className="post-tile-description"&gt;{job.description}&lt;/li&gt;
                    &lt;li className="post-tile-salary"&gt;£{job.salary}&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
              ))}
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>I've tried moving it and using as:</p>
  
  <pre><code>&lt;Form
     onChange={this.handleChange}
     name={this.state.post.name}
     description={this.state.post.description}
     level={this.state.post.level}
  /&gt;
  </code></pre>
  
  <p>But not sure how to connect it all...any guidance would be really appreciated!</p>