title: How to populate values for multiple input field using Material UI Autocomplete and react hooks
body: <p>Q1. I have used Autocomplete materialui library wherein i have created input field field which is consuming an object but while consoling the value i am having undefined values.</p>
  <p>Q2. How i get populated values for multiple input fields if iam selecting value for Item Name field, whereas rest of input field i.e mrp, sellprice etc will be populate from the object consuming the values for Item Name field.(attached the image)</p>
  <p><a href="https://i.stack.imgur.com/Zfawl.png" rel="nofollow noreferrer">Form img</a></p>
  <pre><code>const initialFValues = {
    id: 0,
    itemName: &quot;&quot;,
    mrp: &quot;&quot;,
    buyPrice: &quot;&quot;,
    sellPrice: &quot;&quot;,
    qty: &quot;&quot;,
    manufactureId: &quot;&quot;,
    manufactureDate: new Date(),
    expiryDate: new Date(),
  
  };
  
  export default function ItemForm(props) {
    const { addOrEdit, recordForEdit, invoiceId } = props;
  
    const validate = (fieldValues = values) =&gt; {
      let temp = { ...errors };
      if (&quot;itemName&quot; in fieldValues)
        temp.itemName = fieldValues.itemName ? &quot;&quot; : &quot;This field is required.&quot;;
      if (&quot;mrp&quot; in fieldValues)
        temp.mrp = fieldValues.mrp.length &gt; 1 ? &quot;&quot; : &quot;Price is invalid.&quot;;
      if (&quot;buyPrice&quot; in fieldValues)
        temp.buyPrice =
          fieldValues.buyPrice.length &gt; 1 ? &quot;&quot; : &quot;Price is invalid.&quot;;
      if (&quot;sellPrice&quot; in fieldValues)
        temp.sellPrice =
          fieldValues.sellPrice.length &gt; 1 ? &quot;&quot; : &quot;Price is invalid.&quot;;
      if (&quot;qty&quot; in fieldValues)
        temp.qty = fieldValues.qty.length &gt; 0 ? &quot;&quot; : &quot;Qty is invalid.&quot;;
      if (&quot;manufactureId&quot; in fieldValues)
        temp.manufactureId =
          fieldValues.manufactureId.length !== 0 ? &quot;&quot; : &quot;This field is required.&quot;;
      setErrors({
        ...temp,
      });
  
      if (fieldValues === values)
        return Object.values(temp).every((x) =&gt; x === &quot;&quot;);
    };
  
    const {
      values,
      setValues,
      errors,
      setErrors,
      handleInputChange,
      resetForm,
    } = useForm(initialFValues, true, validate);
  
    const handleSubmit = (e) =&gt; {
      //  console.log(&quot;InvoiceId: &quot; + invoiceId);
      e.preventDefault();
      if (validate()) {
        values.invoiceId = invoiceId;
        addOrEdit(values, resetForm);
      }
    };
  
    useEffect(() =&gt; {
      if (recordForEdit != null)
        setValues({
          ...recordForEdit,
        });
        values.itemName=itemName.name
    }, [recordForEdit, setValues]);
     
  
  // consuming from useform
      const handleInputChange = e =&gt; {
          const { name, value } = e.target
          setValues({
              ...values,
              [name]: value
          })
          console.log(values.itemName)  // -&gt; this value is undefined 
          if (validateOnChange)
              validate({ [name]: value })
      }
        
      
  
    return (
      &lt;Form onSubmit={handleSubmit}&gt;
        &lt;Grid container&gt;
          &lt;Grid item xs={6}&gt;
            &lt;Autocomplete
              id=&quot;itemName&quot;
              name=&quot;itemName&quot;
              error={errors.itemName}
              [enter image description here][1]value={values.itemName=itemName.name}    -&gt; this value is undefined 
              onChange={handleInputChange}
              options={itemName}
              getOptionLabel={(option) =&gt; option.name}
              style={{ width: 300 }}
              renderInput={(params) =&gt; (
                &lt;TextField {...params} label=&quot;Item Name&quot; variant=&quot;outlined&quot; /&gt;
              )}
            /&gt;
            {/* &lt;Controls.Input
              name=&quot;itemName&quot;
              label=&quot;Item Name&quot;
              value={values.itemName}
              onChange={handleInputChange}
              error={errors.itemName}
            /&gt; */}
            &lt;Controls.Input
              name=&quot;mrp&quot;
              label=&quot;MRP&quot;
              value={values.mrp}
              onChange={handleInputChange}
              error={errors.mrp}
            /&gt;
            &lt;Controls.Input
              name=&quot;buyPrice&quot;
              label=&quot;Buy Price&quot;
              value={values.buyPrice}
              onChange={handleInputChange}
              error={errors.buyPrice}
            /&gt;
            &lt;Controls.Input
              name=&quot;sellPrice&quot;
              label=&quot;Sell Price&quot;
              value={values.sellPrice}
              onChange={handleInputChange}
              error={errors.sellPrice}
            /&gt;
            &lt;Controls.Input
              name=&quot;qty&quot;
              label=&quot;Quantity&quot;
              value={values.qty}
              onChange={handleInputChange}
              error={errors.qty}
            /&gt;
          &lt;/Grid&gt;
          &lt;Grid item xs={6}&gt;
            &lt;Controls.SelectCustom
              name=&quot;manufactureId&quot;
              label=&quot;Manufacture Name&quot;
              value={values.manufactureId}
              onChange={handleInputChange}
              options={itemService.getItemCollection()}
              error={errors.manufactureId}
            /&gt;
            &lt;Controls.DatePicker
              name=&quot;manufactureDate&quot;
              label=&quot;Date of Manufacture&quot;
              autoOk={false}
              value={values.manufactureDate}
              onChange={handleInputChange}
            /&gt;
            &lt;Controls.DatePicker
              name=&quot;expiryDate&quot;
              label=&quot;Date of Expiry&quot;
              value={values.expiryDate}
              onChange={handleInputChange}
            /&gt;
  
            &lt;div&gt;
              &lt;Controls.Button type=&quot;submit&quot; text=&quot;Submit&quot; /&gt;
              &lt;Controls.Button text=&quot;Reset&quot; color=&quot;default&quot; onClick={resetForm} /&gt;
            &lt;/div&gt;
          &lt;/Grid&gt;
        &lt;/Grid&gt;
      &lt;/Form&gt;
    );
  }
  </code></pre>