How do I return one child instead of multiple children in React?-CodePudding

Basically, I am trying to get the total number of vacancies in a place and I have made sure that I only return one child after doing all of the aggregation conditionals before the return. What's wrong with my code?

BTW, I am using typescript to produce the code and the following is part of html to be returned and rendered.

<td className="tree-total-vacancy">
    {()=>{
        let vacancyNum: number[]=[];

        if(value.LGV?.space!=undefined){
        vacancyNum.push(value.LGV.space);}

        if(value.HGV?.space!=undefined){
        vacancyNum.push(value.HGV.space);}
    
        if(value.coach?.space!=undefined){
        vacancyNum.push(value.coach.space);}
                                        
        if(value.motorCycle?.space!=undefined){
        vacancyNum.push(value.motorCycle.space);
        }

        let totalVacancyNum=vacancyNum[0] vacancyNum[1] vacancyNum[2] vacancyNum[3];
        return {totalVacancyNum};
    }};
</td>

CodePudding user response：

If you made sure there is only one child pushed why don't you use

let totalVacancyNum=vacancyNum[0]

CodePudding user response：

There are couple of things I want to point out.

We can make a function call outside and use the values instead of creating a callback within, like:

const totalVacancy: number = () => {
        let vacancyNum: number[]=[];

        if(value.LGV?.space!=undefined){
        vacancyNum.push(value.LGV.space);}

        if(value.HGV?.space!=undefined){
        vacancyNum.push(value.HGV.space);}
    
        if(value.coach?.space!=undefined){
        vacancyNum.push(value.coach.space);}
                                        
        if(value.motorCycle?.space!=undefined){
        vacancyNum.push(value.motorCycle.space);
        }

        const totalVacancyNum=vacancyNum[0] vacancyNum[1] vacancyNum[2] vacancyNum[3];
        return {totalVacancyNum};
};

<td className="tree-total-vacancy">{totalVacancy}</td>

What's the need of using an array when you want to calculate the items value within and return the result. You can use a number variable and calculate the values as you go along.


const totalVacancy: number = () => {
        let vacancyNum: number = 0;

        if(value.LGV?.space!=undefined){
        vacancyNum =value.LGV.space;}

        if(value.HGV?.space!=undefined){
        vacancyNum =value.HGV.space;}

        if(value.coach?.space!=undefined){
        vacancyNum =value.coach.space;}

        if(value.motorCycle?.space!=undefined){
        vacancyNum =value.motorCycle.space;
        }

        return {totalVacancyNum: vacancyNum};
};

Let's say you need the vacancyNum as array, you could use reducer to calculate the sum of it's items.

const totalVacancy: number = () => {
        let vacancyNum: number[]=[];

        if(value.LGV?.space!=undefined){
        vacancyNum.push(value.LGV.space);}

        if(value.HGV?.space!=undefined){
        vacancyNum.push(value.HGV.space);}

        if(value.coach?.space!=undefined){
        vacancyNum.push(value.coach.space);}

        if(value.motorCycle?.space!=undefined){
        vacancyNum.push(value.motorCycle.space);
        }

        const totalVacancyNum = vacancyNum.reduce((prev, curr) => prev curr, 0);
        return {totalVacancyNum};
};