I am receiving my API data in react. I am sending same data to another component to download the excel file.
const [data,setData] = useState([]);
const fetchDataForExcel = async()=>{
const {data}= await axios.get( env.resourceServerUrl+"/payment/data");
setData(data);
}
I am sending this data to another component to create excel file.
<div><ExportToExcel apiData={data} fileName={fileName} /></div>
actually my data containes many field like ID, SSN, Name etc. I want to send selected field from data , not all the field. what changes should I do?
If you already know the name of the property on the object you want, then you should be able to send it with;
<div><ExportToExcel apiData={data.foo} fileName={fileName} /></div>
Alternatively, you could send the entire data object, then inside <ExportToExcel> you could access the property from the prop, eg/
props.apiData.foo. (
To me, the name "apiData" suggests all the data returned from an API not just a single property.)
Just create new obj with fields you need like this
<ExportToExcel
apiData={{ sheet1: data.sheet1, otherstuff: data.other }}
fileName={fileName}
/>
or better (if ExportToExcel is not provided by some library)
<ExportToExcel
sheet1={data.sheet1}
otherstuff={data.other}
fileName={fileName}
/>
Since you can't destructure data inside ExportToExcel component, you've got 2 options:
If you'll just be using certain fields in data throughout, just destructure it inside fetchDataForExcel function, pass only those to setData.
const fetchDataForExcel = async()=>{
const {data}= await axios.get( env.resourceServerUrl+"/payment/data");
const {field1, field2, field3} = data;
setData({field1, field2, field3});
}
Then just pass data directly
<div><ExportToExcel apiData={data} fileName={fileName} /></div>
Selectively pass the props:
<div><ExportToExcel apiData={{field1: data.field1, field2: data.field2}}
fileName={fileName} /></div>
Let me know if it helps :)