title: How to initialize data using map inside useState in ReactJs?
body: <p>I'm new to React and in the assignment I'm working on, I have to show data in a AG Grid table. For that this is how I'm initializing <code>rowData</code> inside <code>useState()</code>, but it's not shown in the webpage. The table is empty with just column names.</p>
  <pre><code>const CommentTable: React.FC&lt;CommentProps&gt; = (props) =&gt; {
    const { comments }  = props;//comments is an array of an object named Comment.
  
    const [rowData] = useState(comments.map(comment =&gt; {
      return {
        postName: comment.inputs.postName,
        commentName: comment.name,
        size: getSize(comment)
      }
    }));
  
    const columnDefs = [
      { field: 'postName', headerName: 'Post Name' },
      { field: 'commentName', headerName: 'Comment Name' },
      { field: 'size', headerName: 'Size'  }
    ]
     }
  
    return (
      &lt;div style={{height:'5000px', width:'100%'}}&gt;
      &lt;AgGridReact
        columnDefs={columnDefs}
        rowData={rowData}
      /&gt;
    &lt;/div&gt;
  )
  </code></pre>
  <p>The code inside <code>useState()</code> seems to have no issues but I can't understand why no data is being shown in the table on the webpage.</p>