CODEWITHSUNDEEP
javascriptreactjsconditional-operatorconditional-rendering
Jorge Guerreiro
Jorge Guerreiro

Reputation: 847

Check if props are undefined when loading component

I have a question regarding checking if props are undefined in a functional component in order to render one screen or another.

My functional component:

const InfoHeader = ({population, infected, recovered, deaths, active}) => {
console.log(population)
    return(
        <div className="infoHeader-wrapper">
            ///code to render the information passed into the props
        </div>
    )
}

export default InfoHeader

I know the props on first load are undefined since they only get a value upon user interaction with a section on a map I created.

My question here is:

Rather than doing something like

if(population !==undefined && infected !== undefined && ... )

Is there a better way in order to create a ternary operator to conditionally render one element or another in the functional component' return? Something like:

return(
   allProps !== undefined ?? renderX : renderY
)

Many thanks

Upvotes: 1

Views: 2650

Answers (4)

Jakob L&#228;mmle
Jakob L&#228;mmle

Reputation: 326

Switch is one possibility

switch (expr) {
  case "Oranges":
    console.log("Oranges are $0.59 a pound.");
    break;
  case "Apples":
    console.log("Apples are $0.32 a pound.");
    break;
  case "Bananas":
    console.log("Bananas are $0.48 a pound.");
    break;
  case "Cherries":
    console.log("Cherries are $3.00 a pound.");
    break;
  case "Mangoes":
  case "Papayas":
    console.log("Mangoes and papayas are $2.79 a pound.");
    break;
  default:
    console.log("Sorry, we are out of " + expr + ".");
}

console.log("Is there anything else you'd like?");

https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/switch

In your case you could use it like this:

switch (population !==undefined && infected !== undefined) {
  case true:
    console.log('All is defined');
    break;
  case false:
    console.log('Not all is defined.');
    break;
  
  default:
    console.log('Default');
}

Upvotes: 0

Higor Castilho
Higor Castilho

Reputation: 1

If the question is readability, you can also make this:

 const scenario = population !==undefined && infected !== undefined && ...
 return(
    scenario ? renderX : renderY
 )

Upvotes: 0

Ramesh Reddy
Ramesh Reddy

Reputation: 10662

You could do something like this:

const bla = {
  population: null,
  infected: undefined,
  recovered: 1,
  deaths: true,
  active: 'yes'
}

const areAllTruthy = Object.values(bla).every(v => v !== null && v!== undefined)
console.log(areAllTruthy)

Upvotes: 1

buzatto
buzatto

Reputation: 10382

you could create a function that takes props that validates all values are not undefined:

const InfoHeader = (props) => {
  const {population, infected, recovered, deaths, active} = props

  const propsValid = (props) => Object.values(props).every(prop => prop !== undefined)

  console.log(population)
  return(
    propsValid(props) ? renderX : renderY
  )
}

export default InfoHeader

Upvotes: 3

Related Questions