React: Get all data from Table from a onclick function

I have react app with a react-spreadsheet component and a button. I am trying to get the data from the spreadsheet on the onclick() event of the button.

import * as React from 'react';
import PropTypes from 'prop-types';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import { TextField, Button } from '@mui/material';
import './App.css';

import Spreadsheet from "react-spreadsheet";

import Dropdown from 'react-dropdown';
import 'react-dropdown/style.css';

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div
      role="tabpanel"
      hidden={value !== index}
      id={`simple-tabpanel-${index}`}
      aria-labelledby={`simple-tab-${index}`}
      {...other}
    >
      {value === index && (
        <Box sx={{ p: 3 }}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}


function loadBatchInput() {
    alert("inside");
}

function App() {
  const [tabValue, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  //batch input excel
  const [batchInputData, setbatchInputData] = React.useState([
    [{ value: "Type"}, { value: "Region" }, { value: "Product" }, { value: "Brand" }, { value: "Sku_Type" }],
    []
  ]);


  return (
    <div className="App">
      <div className="content">
          <TabPanel value={tabValue} index={0}>
            <div className='rowA'>
              <div>
                Batch Input Table
              </div>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <div>
                <Button variant="contained" onClick={() => loadBatchInput() }>Load Batch Input</Button>
              </div> 
              &nbsp;&nbsp;&nbsp;&nbsp;              
              <div>
                <Spreadsheet data={batchInputData} onChange={setbatchInputData} />
              </div>
            </div>
          </TabPanel>
      </div>
    </div>
  );
}

export default App;

I am trying to get the data added to the spreadsheet via the webpage inside a JavaScript function.

Is there a way to get the react-spreadsheet data(if any added via frontend) inside the loadBatchInput() on click of the Load Batch Input button

Thanks,

Answer

In your loadBatchInput() function, you will need to add your data to the 2nd element of the array of your batchInputData state. You can do so with the following:

  const loadBatchInput = () => {
    let batch = [...batchInputData];
    batch[1] = [{value: 'data'}]
    setbatchInputData(batch);
  }