I have a react component Project.js and Table.js. I am trying to make it so when a chooses files inside Project.js, it sends those files to Table.js to be displayed.
So inside Project.js, the default for the state tableData is set with 2 elements:
const [tableData, setTableData] = useState([
[
"itemId",
"<div style='cursor: pointer;'> = num</div>",
"<input type='checkbox'>",
"metaTitle A"
],
[
"itemId",
"<div style='cursor: pointer;'> = num</div>",
"<input type='checkbox'>",
"metaTitle B"
],
]);
This gets passed into the Table.js component like so:
<Table tableData={tableData} />
And get displayed correctly, I even have some code that prints out a list of the tableData items from within Project.js
<ul>
<h3>tableData:</h3>
{tableData.map((tableRow) => (
<li key={tableRow[3]}>
{tableRow[3]}
</li>
))}
</ul>
As you can see, the two rows get displayed inside Table.js and Project too just fine
Then when the user drags/selects files, this function gets called which sets the updates the state var with a third row ‘metaTitle C’
const handleFilesSelect = (files) => {
console.log('Setting selectedFiles = ', files)
setSelectedFiles(files);
//create new table data var
let newTableData = [
...tableData,
[
"itemId",
"<div style='cursor: pointer;'> = num</div>",
"<input type='checkbox'>",
"metaTitle C"
]
];
//set table data state
console.log('Setting tableData =', newTableData)
setTableData(newTableData);
};
So when i drag new files, I can see the state var for tableData got updated because the new third row is printed on the dom for Project.js, but the <Table tableData={tableData} /> line which passes the state var into the Table.js component, does not update the table? Am I updating or passing my state var tableData wrong?
