Better Object destructuring in react and es6

Question

I have an object with some properties like

weather.name = 'Coudy'
weather.country= 'USA'

Currently I am using Object destructuring in ES6 but as you can see it is quite verbose. I would like to know if it is possible to rewrite in a more concise way this code.

Notes: I am using babel with

  "presets": ["es2015", "react", "stage-2"]

const Weather = ({ weather }) => {
  let {
    name,
    country,
    temperature,
    temperatureMin,
    temperatureMax,
    weatherMain,
    weatherDescription,
    weatherIcon,
    updatedTime,
    windDegree,
    windSpeed,
    visibility
 } = weather
  return (<div>
    { name }, { country }
    { temperature }
    { temperatureMin }
    { temperatureMax }
    { weatherMain }
    { weatherDescription }
    { weatherIcon }
    { updatedTime }
    { windDegree }
    { windSpeed }
    { visibility }
  </div>
  )
}

export default Weather

you want to print all the value of weather object or some specific one ? — Mayank Shukla
– Mayank Shukla, Commented Apr 30, 2017 at 13:34
what about ({ weather }) => (<div> { Object.values(weather).join("\n") } </div>) — Thomas
– Thomas, Commented Apr 30, 2017 at 14:10

Estus Flask · Accepted Answer · 2017-04-30 13:50:48Z

2

Yes, it's possible with parameter destructuring. weather temporary variable can be efficiently skipped (and Weather too - it isn't a constructor anyway):

export default ({ weather: {
    name,
    country,
    temperature,
    temperatureMin,
    temperatureMax,
    weatherMain,
    weatherDescription,
    weatherIcon,
    updatedTime,
    windDegree,
    windSpeed,
    visibility
 } }) => (<div>
    { name }, { country }
    { temperature }
    { temperatureMin }
    { temperatureMax }
    { weatherMain }
    { weatherDescription }
    { weatherIcon }
    { updatedTime }
    { windDegree }
    { windSpeed }
    { visibility }
  </div>)

All property names still should be written twice during destructuring, and this is a good thing here. This allows to pick only known properties from the object. If some of the used props weren't destructured or were misspelled in returned value, an error will be thrown. And if some of destructured props weren't used by accident, this can be indicated by IDE or a linter.

edited Apr 30, 2017 at 13:50

answered Apr 30, 2017 at 13:38

Estus Flask

227k79 gold badges478 silver badges621 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mayank Shukla Over a year ago

i think all the values will be undefined because they exist in props.weather not directly inside props ? he is destructuring twice.

Estus Flask Over a year ago

Yes, it appears that you're right. Thanks for pointing at that.

Andrici Cezar · Accepted Answer · 2017-04-30 14:02:22Z

0

This is unsafe because it uses eval function, but you can do something like this:

const Weather = ({ weather }) => {
  eval(
    "var " +
    Object
      .keys(weather)
      .map(key => key + "="+ JSON.stringify(weather[key]))
      .join(', '));

  return (<div>
          {name}, {location}, 
          {anyAttribute.join(', ')}
  </div>
  )
};

ReactDOM.render(
  <Weather weather={{
    name: "lalala",
    location: "dadada",
    anyAttribute: [1,2,3]}} />,
  document.getElementById("root")
);

answered Apr 30, 2017 at 14:02

Andrici Cezar

6031 gold badge9 silver badges15 bronze badges

1 Comment

Estus Flask Over a year ago

It should be noticed that eval makes possible the usage of with, which makes the thing simpler. But yes, eval is evil, and with isn't very kind, too.

Collectives™ on Stack Overflow

Better Object destructuring in react and es6

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related