React: Get all data from Table from a onclick function

Question

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,

caslawter · Accepted Answer · 2022-10-25 10:09:34Z

1

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

answered Oct 25, 2022 at 10:09

caslawter

6801 gold badge7 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SM079 Over a year ago

Not exactly what i was looking for.. but it did gave me how to proceed further, thanks.

Collectives™ on Stack Overflow

React: Get all data from Table from a onclick function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related