Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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 rowData inside useState() , but it's not shown in the webpage. The table is empty with just column names.

const CommentTable: React.FC<CommentProps> = (props) => {
  const { comments }  = props;//comments is an array of an object named Comment.
  const [rowData] = useState(comments.map(comment => {
    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 (
    <div style={{height:'5000px', width:'100%'}}>
    <AgGridReact
      columnDefs={columnDefs}
      rowData={rowData}
The code inside useState() seems to have no issues but I can't understand why no data is being shown in the table on the webpage.
If props.comments is a populated array on the initial render cycle then mapping it in the useState hook for the initial state value should work. If it is not available on the initial render then you'll use an useEffect hook with a dependency on props.comments to update the rowData state when it [comments] updates.
const { comments } = props;
const [rowData, setRowData] = useState([]);
useEffect(() => {
  setRowData(comments.map(comment => ({
    postName: comment.inputs.postName,
    commentName: comment.name,
    size: getSize(comment)
  })));
}, [comments]);
Try to split your code. The declaration with a useState() hook and the splitting of the map via a useEffect() hook.
Example:
const CommentTable: React.FC<CommentTableProps> = (props) => {
  const [comments, setComments] = useState();
  const [rowData, setRowData] = useState();
  const columnDefs = [
      { field: 'postName', headerName: 'Post Name' },
      { field: 'commentName', headerName: 'Comment Name' },
      { field: 'size', headerName: 'Size'  }
  useEffect(() => {             
    setComments(props);
  }, [props]);
  useEffect(() => {   
    comments.foreach((scenario) => {
      let row {
        postName: comment.inputs.postName,
        commentName: comment.name,
        size: getSize(comment)
   setRowData((rowData) => [...rowData, row])
  }, [comments]);
  return (
    <div className="a-css-class" style={{height:'5000px', width:'100%'}}>
    <AgGridReact
      modules={AllModules}
      columnDefs={columnDefs}
      rowData={rowData}
For more information please visit:
useState() -> https://reactjs.org/docs/hooks-state.html
useEffect() -> https://reactjs.org/docs/hooks-effect.html
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.