Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // The parent component to this is a page, it loads data client side from my API and passes that data to this component as a prop.
- // rowData (state) is not being populated by data (prop), even though I can see the correct data in the console log of the 2nd render
- // The 1st render console log shows data as an empty array, and rowData as an empty array
- // The 2nd render console logs the correct contents in the data array, rowData is still an empty array
- // table does not get updated
- //I can solve this using useEffect and setting the rowData, but I dont think I should have to, unless NextJS is forcing me to.
- import React, { useState } from "react";
- import { sortBy } from "../../utils/sortBy";
- export default function Table({data}) {
- const [ rowData, setRowData ] = useState(data); // I think this is the issue due to SSR w/ NextJS
- function clickSort(key) {
- setData([...rowData].sort(sortBy(key))); // this works, can ignore
- }
- const table = rowData.map((row, index) => {
- return <div key={index}>{row.name}</div>; // this works, can ignore
- });
- console.log(data);
- console.log(rowData);
- return (
- <div>
- <button onClick={() => clickSort("name")}>Click to sort by Name</button>
- <button onClick={() => clickSort("id")}>Click to sort by ID</button>
- {table}
- </div>
- );
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement