title: How to manipulate object property on a reusable component in React
body: <p>Im using MUIs input field for a lot of input sections of my questionnaire and want to save it to my state variable that is an object which holds all my form values. How can I manipulate my formData object in a reusable MUI component?</p>
  <p>Im currently passing formData as a prop to the component but am unsure how to use the setFormData inside the component since it will be a different property each time I use it.</p>
  <p>I was thinking each question is a property of the state object formData so itll look like</p>
  <pre><code>formData{question1: 'foo', question2: 'bar'}
  </code></pre>
  <p><strong>This is how the form looks at the moment (i dont mind changing the structure if it makes sense to do so</strong></p>
  <p><em>Take a look at InputField on the form (i also attached the component code)</em></p>
  <pre><code>&lt;QuestionLabel&gt;Do you have a &quot;Nickname&quot;:&lt;/QuestionLabel&gt;
  &lt;InputField value={props.formData.nickname}/&gt;
  
  &lt;QuestionLabel&gt;Preferred Language:&lt;/QuestionLabel&gt;
  &lt;InputField value={props.formData.language}/&gt;
  
  &lt;QuestionLabel&gt;Occupation:&lt;/QuestionLabel&gt;
  &lt;InputField value={props.formData.occupation}/&gt;
  </code></pre>
  <p><strong>This is how the component looks (im aware i will have to change this)</strong></p>
  <pre><code>export default function InputField(props){
      return(
          &lt;TextField
          fullWidth
          value={props.value}
              variant='standard'    
          /&gt;
      )
  }
  </code></pre>
  <p><em>Disclaimer</em>
  <strong>First post so sorry if the format isn't perfect or if i attached the code snippets in a inconvenient way, please give me some pointers if thats the case</strong></p>