Recibo mis datos de API en react . Estoy enviando los mismos data a otro componente para download el archivo de Excel.
const [data,setData] = useState([]); const fetchDataForExcel = async()=>{ const {data}= await axios.get( env.resourceServerUrl+"/payment/data"); setData(data); }Estoy enviando estos datos a otro componente para crear un archivo de Excel.
<div><ExportToExcel apiData={data} fileName={fileName} /></div> en realidad, mis data contienen muchos campos como ID, SSN, Name etc. Quiero enviar el campo seleccionado de los data , no todo el campo. que cambios debo hacer?
Si ya conoce el nombre de la propiedad en el objeto que desea, entonces debería poder enviarlo con;
<div><ExportToExcel apiData={data.foo} fileName={fileName} /></div>
Alternativamente, puede enviar el objeto de datos completo, luego dentro <ExportToExcel> puede acceder a la propiedad desde el accesorio, por ejemplo, props.apiData.foo . (Para mí, el nombre "apiData" sugiere todos los datos devueltos por una API, no solo una propiedad).
Simplemente cree un nuevo obj con los campos que necesita como este
<ExportToExcel apiData={{ sheet1: data.sheet1, otherstuff: data.other }} fileName={fileName} />o mejor (si alguna biblioteca no proporciona ExportToExcel)
<ExportToExcel sheet1={data.sheet1} otherstuff={data.other} fileName={fileName} />Como no puede desestructurar datos dentro del componente ExportToExcel , tiene 2 opciones:
Si solo usará ciertos campos en los datos en todo momento, simplemente desestructurarlos dentro de la función fetchDataForExcel , pasar solo esos a setData .
const fetchDataForExcel = async()=>{ const {data}= await axios.get( env.resourceServerUrl+"/payment/data"); const {field1, field2, field3} = data; setData({field1, field2, field3}); }Luego simplemente pase los datos directamente
<div><ExportToExcel apiData={data} fileName={fileName} /></div>Pase selectivamente los accesorios:
<div><ExportToExcel apiData={{field1: data.field1, field2: data.field2}} fileName={fileName} /></div>Avísame si te ayuda :)