Please let me know how I can optimize more below code in one line:
{addressToDisplay?.addressLineOne}
{addressToDisplay?.addressLineTwo}
{addressToDisplay?.city}
{addressToDisplay?.state}
{addressToDisplay?.zip}
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` `}</>
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]}</>)}
{addressToDisplay && addressField.map((key) => <>{addressToDisplay[key]}</>)}