title: How to properly append to string array that was passed as props in functional component
body: <p>I have a parent component that defines a useState hook that is a string array. I then have a child component that needs to update the string array, so I pass both the string array and the useState's function to update it. However, when I try to refer to the props array, the interpreter complains (see code/comments):</p>
  <p>ParentComponent.tsx:</p>
  <pre><code>import React, { useState } from 'react';
  import { ChildComponent } from './ChildComponent';
  
  export function ParentComponent() {
      const [log, setLog] = useState&lt;string[]&gt;([]);
  
      return(
          &lt;ChildComponent log={log} setLog={setLog} /&gt;
      );
  };
  </code></pre>
  <p>ChildComponent.tsx</p>
  <pre><code>import React, { useEffect } from 'react';
  
  interface Props {
      log: string[],
      setLog: Function
  };
  
  export function ChildComponent(props: Props) {
  
      useEffect(() =&gt; {
  
          /* I typically use this pattern to append to an array in a useState hook:
  
          setArray(array =&gt; [...array, &quot;String to append&quot;]);
  
          so I try to use this with the props as well: */
  
          props.setLog(props.log =&gt; [...props.log, &quot;Loaded child component.&quot;]); // Interpreter complains at arrow: ',' expected. ts(1005)
      },[]);
  
      return (
          &lt;div&gt;
              {props.log.map(logItem =&gt; &lt;p key={logItem}&gt;{logItem}&lt;/p&gt;)}
          &lt;/div&gt;
      );
  };
  </code></pre>
  <p>What am I doing wrong?</p>