Need help understanding what is happening in object destructuring for React component

user_14330686 0
Viewed 42

I was watching a video about layout components and I saw that the author seemed to destructure the parameters but also assign it as a property in an object (as seen in Splitscreen.js)? I was wondering if anyone could help me understand what is going and why he chose to do this? Are there any advantages to doing so?

Splitscreen.js
export const Splitscreen = ({ left: Left, right: Right }) => {
  return (
    <Container>
      <Pane>
        <Left />
      </Pane>
      <Pane>
        <Right />
      </Pane>
    </Container>
  );
};
App.js
const LeftHandComponent = () => {
  return <h1>Left</h1>;
};
const RightHandComponent = () => {
  return <h1>Right</h1>;
};

function App() {
  return <Splitscreen left={LeftHandComponent} right={RightHandComponent} />;
}

export default App;
object-destructuring reactjs ecmascript-6 javascript
2 Answers

This isn't some special React thing. It's basic JavaScript. Objects are usually destructured like this:

const { age } = {
  name: "John",
  age: 23
};

console.log(age);

However, what if you don't want to use the given name in the object but assign it a custom name, still with object destructuring?

Remember in import statements you could do

import something as smt from './something';

What if you wanted to call age userAge? You can do something similar:

const { age: userAge } = { age: 23 };

console.log(userAge);

That's what's going on. Take a regular function:

function myFunc(obj) {
  console.log(obj.name);
}

myFunc({ name: "hello" });

You could do:

function myFunc({ name }) {
  console.log(name);
}

myFunc({ name: "hello" });

But if you wanted to name it something else, the right hand side would rename it:

function myFunc({ name: objName }) {
  console.log(objName);
}

myFunc({ name: "hello" });

In your example, the parameter was renamed to it's PascalCase equivalent because that's the naming convention for React components.

user_153591570

Typically in HTML we use lowercase words for parameters or attributes, and an upper-case first letter for elements. So this looks normal and correct:

<Splitscreen left=xxx right=yyy>

It would look odd to have the parameters with an upper first letter like this:

<Splitscreen Left=xxx Right=yyy>

Now inside of the Splitscreen implementation we want to use left and right as HTML elements so the author wanted to maintain the convention and call them Left and Right when using them because this would look wrong:

    <Container>
      <Pane>
        <left />            <--- just looks odd
      </Pane>
      <Pane>
        <right />           <--- just looks odd
      </Pane>
    </Container>

Using destructuring with renaming is an easy way to assign left to Left and right to Right and avoids having bulky extra lines of code like this:

export const Splitscreen = ({ left, right }) => {
  const Left = left;
  const Right = right;
  return (...)
user_34704140
Related