How to initialize data using map inside useState in ReactJs?

Question

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}
    />
  </div>
)

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.

Answer 1

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]);

Answer 2

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}
    />
  </div>
)

For more information please visit:

useState() -> https://reactjs.org/docs/hooks-state.html

useEffect() -> https://reactjs.org/docs/hooks-effect.html