title: TypeScript: Type must have a '[Symbol.iterator]()' method that returns an iterator.ts(2488)
body: <p>I reviewed the other questions with a similar title, but cannot apply those solutions to this question. <em>Please do not mark this question a duplicate without explaining in detail how the other answer applies here.</em></p>
  <p>Goal is to allow deletion of several PDF files at once by returning an array of objects with each PDF-to-be-deleted as an object in the array.</p>
  <p>The list of PDF files is passed in as a string via the <code>Props</code> (rowData) and converted to an object in <code>useEffect</code>.</p>
  <pre><code>interface TableRowData {
    id: number;
    name: string;
    pdf: string;  // &quot;['bob.pdf', 'sam.pdf', 'art.pdf']&quot;
  }
  interface ObjPdfsToRemove {
      pdfs2EditType: string;
      catSubcatId: number;
      pdf2del: string;
  }
  interface DlgEditSubcatPdfsProps {
    rowData: TableRowData;
    onClose(): void;
      pdfs2EditType: string;
  }
  
  export const DlgEditSubcatPDFs: FunctionalComponent&lt;DlgEditSubcatPdfsProps&gt; = ({ rowData, pdfs2EditType, onClose }) =&gt; {
  
  const [currRowData, setCurrRowData] = useState&lt;TableRowData&gt;(rowData);
  const [arrPdfNames, setArrPdfNames] = useState([]);
  const [pdfs2Remove, setPdfs2Remove] = useState&lt;ObjPdfsToRemove[] | undefined&gt;(undefined);
  
  useEffect(() =&gt; {
      setCurrRowData(rowData);
      setArrPdfNames(JSON.parse(rowData.pdf));
  }, [rowData]);
  </code></pre>
  <p>The PDFs are displayed on screen like this:</p>
  <pre><code>&lt;div class={style.fileList}&gt;
      {arrPdfNames !== undefined &amp;&amp; arrPdfNames?.map((d) =&gt; {
          return (
              &lt;div class={style.pdfsFlexRow}&gt;
                  &lt;Button className={style.pdfDelBtn} onClick={() =&gt; handleDelPdf(d)}&gt;
                      DEL
                  &lt;/Button&gt;
                  &lt;div class={style.pdfFileName}&gt;{d}&lt;/div&gt;
              &lt;/div&gt;
          );
      })}
  &lt;/div&gt;
  </code></pre>
  <p>When the Del button is clicked:</p>
  <pre><code>const handleDelPdf = (pdf2del: string) =&gt; {
      setPdfs2Remove(pdfs2Remove !== undefined =&gt; [...pdfs2Remove, {  //ADDED per VLAZ suggestion (pretty sure my syntax incorrect)
          pdfs2EditType: pdfs2EditType,
          catSubcatId: rowData.id,
          pdf2del: pdf2del,
      }]);
  };
  </code></pre>
  <p>THE ERROR is in <code>handleDelPdf</code> (immediately above), on this line:<br>
  <code>setPdfs2Remove(pdfs2Remove =&gt; [...pdfs2Remove, {</code><br>
  <code>                               ^^^^^^^^^^^^^^   </code></p>
  <p>When hover the <code>...pdfs2Remove</code>, the TS Error reads:</p>
  <pre><code>Type 'ObjPdfsToRemove[] | undefined' must have a '[Symbol.iterator]()' method that returns an iterator.ts(2488)
  -----
  (parameter) pdfs2Remove: ObjPdfsToRemove[] | undefined
  </code></pre>
  <p>How to fix this error?</p>
  <h3>Updates:</h3>
  <ol>
  <li>Added IF condition <code>if (pdfs2Remove !== undefined)</code> to the <code>handleDelPdf</code> function, but error remained the same.</li>
  </ol>
  <p>Initially added the conditional test like this:<br></p>
  <pre><code>    if setPdfs2Remove(pdfs2Remove !== undefined){ //--------------------- ADDED (same error)
          setPdfs2Remove(pdfs2Remove =&gt; [...pdfs2Remove, {
              pdfs2EditType: pdfs2EditType,
              catSubcatId: rowData.id,
              pdf2del: pdf2del,
          }]);
      };  //--------------------------------------------------------------- ADDED (same error)
  
  </code></pre>
  <ol start="2">
  <li>Removed (1) above and changed the <code>setPdfs2Remove()</code> func itself, like this <em>(this is how the code is now displayed in the original question)</em>:</li>
  </ol>
  <pre><code>setPdfs2Remove(pdfs2Remove !== undefined =&gt; {
  </code></pre>
  <p>but that's not right either.</p>