Destructuring Properties

Sample `Greet.js` Component

const Greet = props => {
  return (
    <div>
      <h1>
        Hello {props.nickName} or {props.firstName};
      </h1>
    </div>
  )
}

Destructuring Properties in Parameters

const Greet = ({nickName, firstName}) => {
  return (
    <div>  
      <h1>
        Hello {nickName} or {firstName};
      </h1>
    </div>
  )
}

Destructuring Properties in the Function Body

const Greet = props => {
  const {nickName, firstName} = props;
  return (
    <div>
      <h1>
        Hello {nickName} or {firstName};
      </h1>
    </div>
  )
}

References

Video about Destructuring Properties

Previous

Next

Properties and State

Basic Event Handling