'sending selected field to another react component

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?

Solution 1:^[1]

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

Solution 2:^[2]

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

Solution 3:^[3]

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

Solution 4:^[4]

Destructuring would be a best option there as you want selected files destructure data you need and then pass as a props to child component.

 const [data,setData] = useState([]);
  const fetchDataForExcel = async()=>{
        const {data}= await axios.get( env.resourceServerUrl+"/payment/data");
        setData(data); 
    } 
const {requiredField} = data;
 <div><ExportToExcel requiredField={requiredField} fileName={fileName} /></div>

Solution 5:^[5]

VIEW RECREATION

Setting a property on the child component will cause it to get recreated and this can lose its existing data when you set new data.

VIEW MODELS

One way to deal with this is to use view model objects inside the props object. This keeps hold of your data even when views get created. See this view creation for an example of how view models are passed in.

DATA COMPOSITION

In fact if you have an entry point AppViewModel it can then create child view models, and this pattern can easily be extended in a tidy manner.

Have a look at these classes for how it all fits together. React has some other state management solutions but I quite like this one.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	bogdanoff
Solution 3
Solution 4	Build Though
Solution 5	Gary Archer

'sending selected field to another react component

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]