sending selected field to another react component-CodePudding

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?

CodePudding user response：

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.)

CodePudding user response：

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} 
/>