title: Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. because of setState
body: <p>There might be issue in <code>setFormData</code>, can someone please tell me what mistake i have done that causing  rendering in the code. also want to know if there is any mistake in storing image in a state.</p>
  <p>Code summary:</p>
  <ol>
  <li>I am adding image from input field, and this is taken care by <code>imageSelectedHandler</code></li>
  <li>I want to know is <code>imageUploadHandler</code> required? or even without using I will be able to submit the form along with the image?</li>
  <li>I am also adding new input fields, everytime user clicks, add specification button. this is by addClick and removeClick handler</li>
  <li>handleChange handler take care of indivisual Input Flield.</li>
  </ol>
  <p>Please help someone.</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import FormInput from &quot;../Forminput/forminput&quot;;
  import CustomButton from &quot;../Custombutton/custombutton&quot;;
  import axios from &quot;axios&quot;;
  
  const ProductUpload = () =&gt; {
    const [formData, setFormData] = useState({
      sub_category: null,
      product_name: null,
      product_image: null,
      product_specs: [{ specification: &quot;&quot;, specvalue: &quot;&quot; }],
    });
  
    const { sub_category, product_name, product_image, product_specs } = formData;
  
    const imageSelectedHandler = (event) =&gt; {
      setFormData((prevState) =&gt; ({
        product_image: event.target.files[0],
        sub_category: { ...prevState.sub_category },
        product_name: { ...prevState.product_name },
        product_specs: [
          ...prevState.product_specs,
          { specification: &quot;&quot;, specvalue: &quot;&quot; },
        ],
      }));
    };
  
    const imageUploadHandler = () =&gt; {
      const fd = new FormData();
      fd.append(&quot;product_image&quot;, product_image, product_image.name); //.name is Imp as name is property of file
    };
    const handleChange = (i, e) =&gt; {
      const { name, value } = e.target;
      product_specs[i] = { ...product_specs[i], [name]: value };
      setFormData({ product_specs }); //TO BE CHECKED
    };
    //to add extra input field
    const addClick = () =&gt; {
      setFormData((prevState) =&gt; ({
        sub_category: { ...prevState.sub_category },
        product_image: { ...prevState.image },
        product_name: { ...prevState.product_name },
        product_specs: [
          ...prevState.product_specs,
          { specification: &quot;&quot;, specvalue: &quot;&quot; },
        ],
      }));
    };
    //to remove extra input field
    const removeClick = (i) =&gt; {
      product_specs.splice(i, 1);
      setFormData((prevState) =&gt; {
        return {
          sub_category: { ...prevState.sub_category },
          product_image: { ...prevState.image },
          product_name: { ...prevState.product_name },
          product_specs: [
            ...prevState.product_specs,
            { specification: &quot;&quot;, specvalue: &quot;&quot; },
          ],
        };
      });
    };
    const handleSubmit = async (event) =&gt; {
      event.preventDefault();
      const newProduct = {
        sub_category,
        product_name,
        product_image,
        product_specs,
      };
      try {
        const config = {
          headers: {
            &quot;Content-Type&quot;: &quot;application/json&quot;,
          },
        };
        const body = JSON.stringify(newProduct);
        const res = await axios.post(&quot;/api/product&quot;, body, config);
        console.log(res.data);
      } catch (error) {
        console.error(error.response.data);
      }
    };
    const createUI = () =&gt; {
      return product_specs.map((el, i) =&gt; (
        &lt;div key={i} className=&quot;inputgroup&quot;&gt;
          &lt;FormInput
            type=&quot;text&quot;
            name=&quot;specification&quot;
            handleChange={handleChange}
            value={el.specification}
            label=&quot;specification&quot;
            required
            customwidth=&quot;300px&quot;
          &gt;&lt;/FormInput&gt;
          &lt;FormInput
            type=&quot;text&quot;
            name=&quot;specvalue&quot;
            handleChange={handleChange}
            value={el.specvalue}
            label=&quot;specification values seperated by quomas&quot;
            required
          &gt;&lt;/FormInput&gt;
          &lt;CustomButton
            onClick={removeClick(i)}
            type=&quot;button&quot;
            value=&quot;remove&quot;
            style={{ margin: &quot;12px&quot; }}
          &gt;
            Remove
          &lt;/CustomButton&gt;
        &lt;/div&gt;
      ));
    };
    return (
      &lt;div className=&quot;container&quot;&gt;
        &lt;form
          action=&quot;/upload&quot;
          method=&quot;post&quot;
          className=&quot;form&quot;
          onSubmit={handleSubmit}
          encType=&quot;multipart/form-data&quot;
        &gt;
          &lt;h3 style={{ color: &quot;roboto, sans-serif&quot; }}&gt;
            Add new product to the database
          &lt;/h3&gt;
          &lt;div
            style={{
              display: &quot;flex&quot;,
              height: &quot;200px&quot;,
              width: &quot;200px&quot;,
              border: &quot;2px solid #DADCE0&quot;,
              borderRadius: &quot;6px&quot;,
              position: &quot;relative&quot;,
            }}
          &gt;
            &lt;input
              style={{ display: &quot;none&quot; }}
              type=&quot;file&quot;
              accept=&quot;image/*&quot;
              onChange={imageSelectedHandler}
              ref={(fileInput) =&gt; (this.fileInput = fileInput)}
              multiple={false}
              name=&quot;product_image&quot;
            /&gt;
            &lt;CustomButton onClick={() =&gt; this.fileInput.click()}&gt;
              Select Image
            &lt;/CustomButton&gt;
            &lt;CustomButton onClick={imageUploadHandler}&gt;Upload&lt;/CustomButton&gt;
  
            {/*as per brad- type = &quot;submit&quot; value=&quot;submit&quot;  this should not be used, file should upload with the form submit */}
            &lt;div&gt;
              &lt;img
                style={{
                  width: &quot;100%&quot;,
                  height: &quot;100%&quot;,
                }}
                alt=&quot;#&quot;
              /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          {createUI()}
          &lt;div&gt;
            &lt;CustomButton
              onClick={addClick}
              type=&quot;button&quot;
              style={{ margin: &quot;14px&quot; }}
            &gt;
              Add More Fields
            &lt;/CustomButton&gt;
            &lt;CustomButton type=&quot;submit&quot; style={{ margin: &quot;12px&quot; }}&gt;
              Upload Product
            &lt;/CustomButton&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  
  export default ProductUpload;
  </code></pre>
  <p>code with the changes suggested by @AKX</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import FormInput from &quot;../Forminput/forminput&quot;;
  import CustomButton from &quot;../Custombutton/custombutton&quot;;
  import axios from &quot;axios&quot;;
  
  const ProductUpload = () =&gt; {
    const [sub_category, setSub_category] = useState({
      sub_category: &quot;&quot;,
    });
  
    const [product_name, setProduct_name] = useState({
      product_name: &quot;&quot;,
    });
  
    const [product_image, setProduct_image] = useState({
      product_image: &quot;&quot;,
    });
  
    const [product_specs, setProduct_specs] = useState({
      product_specs: [{ specification: &quot;&quot;, specvalue: &quot;&quot; }],
    });
  
    const imageSelectedHandler = (event) =&gt; {
      setProduct_image({ product_image: event.target.files[0] });
    };
  
    // const imageUploadHandler = () =&gt; {
    //   const fd = new FormData();
    //   fd.append(&quot;product_image&quot;, product_image, product_image.name); //.name is Imp as name is property of file
    // };
  
    const handleChange = (i, e) =&gt; {
      const { name, value } = e.target;
      product_specs[i] = { ...product_specs[i], [name]: value };
      setProduct_specs({ product_specs }); //TO BE CHECKED
    };
    //to add extra input field
    const addClick = () =&gt; {
      setProduct_specs({
        product_specs: [...product_specs, { specification: &quot;&quot;, specvalue: &quot;&quot; }],
      });
    };
    //to remove extra input field
    const removeClick = (i) =&gt; {
      [product_specs].splice(i, 1);
      setProduct_specs({
        product_specs: [product_specs],
      });
    };
    const handleSubmit = async (event) =&gt; {
      event.preventDefault();
      const newProduct = {
        sub_category,
        product_name,
        product_image,
        product_specs,
      };
      try {
        const config = {
          headers: {
            &quot;Content-Type&quot;: &quot;application/json&quot;,
          },
        };
        const body = JSON.stringify(newProduct);
        const res = await axios.post(&quot;/api/product&quot;, body, config);
        console.log(res.data);
      } catch (error) {
        console.error(error.response.data);
      }
    };
    const createUI = () =&gt; {
      return [product_specs].map((el, i) =&gt; (
        &lt;div key={i} className=&quot;inputgroup&quot;&gt;
          &lt;FormInput
            type=&quot;text&quot;
            name=&quot;specification&quot;
            handleChange={handleChange}
            value={el.specification}
            label=&quot;specification&quot;
            required
            customwidth=&quot;300px&quot;
          &gt;&lt;/FormInput&gt;
          &lt;FormInput
            type=&quot;text&quot;
            name=&quot;specvalue&quot;
            handleChange={handleChange}
            value={el.specvalue}
            label=&quot;specification values seperated by quomas&quot;
            required
          &gt;&lt;/FormInput&gt;
          &lt;CustomButton
            onClick={removeClick(i)}
            type=&quot;button&quot;
            value=&quot;remove&quot;
            style={{ margin: &quot;12px&quot; }}
          &gt;
            Remove
          &lt;/CustomButton&gt;
        &lt;/div&gt;
      ));
    };
    return (
      &lt;div className=&quot;container&quot;&gt;
        &lt;form
          action=&quot;/upload&quot;
          method=&quot;post&quot;
          className=&quot;form&quot;
          onSubmit={handleSubmit}
          encType=&quot;multipart/form-data&quot;
        &gt;
          &lt;h3 style={{ color: &quot;roboto, sans-serif&quot; }}&gt;
            Add new product to the database
          &lt;/h3&gt;
          &lt;div
            style={{
              display: &quot;flex&quot;,
              height: &quot;200px&quot;,
              width: &quot;200px&quot;,
              border: &quot;2px solid #DADCE0&quot;,
              borderRadius: &quot;6px&quot;,
              position: &quot;relative&quot;,
            }}
          &gt;
            &lt;input
              style={{ display: &quot;none&quot; }}
              type=&quot;file&quot;
              accept=&quot;image/*&quot;
              onChange={imageSelectedHandler}
              ref={(fileInput) =&gt; (this.fileInput = fileInput)}
              multiple={false}
              name=&quot;product_image&quot;
            /&gt;
            &lt;CustomButton onClick={() =&gt; this.fileInput.click()}&gt;
              Select Image
            &lt;/CustomButton&gt;
            &lt;CustomButton
            //  onClick={imageUploadHandler}
            &gt;
              Upload
            &lt;/CustomButton&gt;
  
            {/*as per brad- type = &quot;submit&quot; value=&quot;submit&quot;  this should not be used, file should upload with the form submit */}
            &lt;div&gt;
              &lt;img
                style={{
                  width: &quot;100%&quot;,
                  height: &quot;100%&quot;,
                }}
                alt=&quot;#&quot;
              /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;FormInput
            type=&quot;text&quot;
            name=&quot;sub_category&quot;
            handleChange={handleChange}
            value={sub_category}
            label=&quot;select from subcategories&quot;
            required
          &gt;&lt;/FormInput&gt;
          &lt;FormInput
            type=&quot;text&quot;
            name=&quot;product_name&quot;
            handleChange={handleChange}
            value={product_name}
            label=&quot;product name&quot;
            required
          &gt;&lt;/FormInput&gt;
          {createUI()}
          &lt;div&gt;
            &lt;CustomButton
              onClick={addClick}
              type=&quot;button&quot;
              style={{ margin: &quot;14px&quot; }}
            &gt;
              Add More Fields
            &lt;/CustomButton&gt;
            &lt;CustomButton type=&quot;submit&quot; style={{ margin: &quot;12px&quot; }}&gt;
              Upload Product
            &lt;/CustomButton&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  
  export default ProductUpload;
  </code></pre>