Optimize the display value in React Js

Question

Please let me know how I can optimize more below code in one line:

 {addressToDisplay?.addressLineOne}
      {addressToDisplay?.addressLineTwo}
      {addressToDisplay?.city}
      {addressToDisplay?.state}
      {addressToDisplay?.zip}

Answer 1

You can try this out:

Object.keys(addressToDisplay).map(function(key) {
   return <>{ addressToDisplay[key] }</>
})

And to display both key, value you can add:

Object.entries(addressToDisplay).map(([key, val]) => 
                    <h2 key={key}>{key}: {val}</h2>
                )

If you need specific values then you can store the keys which you need in one array

addressField = ['city', 'state', 'lineone', 'linetwo']

and then get them by

{addressToDisplay && addressField.map(key => <>{addressToDisplay[key]}</>)}

Answer 2

if your object is already well organized you can do this

return <>{[...Object.values(addressToDisplay || {})].join` `}</>;

Or else you have this kind of solution

const {addressLineOne, addressLineTwo, city, state, zip} = addressToDisplay || {};
    
return <>{[addressLineOne, addressLineTwo, city, state, zip].join` `}</>

Answer 3

{addressToDisplay && addressField.map((key) => <>{addressToDisplay[key]}</>)}