ES6 is more popularly known as ECMA script which is a scripting language. this language was created to standardize Javascript language. ES6 is the 6th version of ECMA. ES6 is used to enable client-side languages and is becoming one of the most popular scripting languages. Arrows, for..of, generators, map, destructuring, promises, let-const these are some features of ES6. ES6 Destructuring is one of the best feature which comes with JavaScript. As we all know React is a component-based Library that contains different small components in it. so to send data from one component to another we use PROPS in React.

function Destructuring (props)
{
}

so this is how we can declare props using a function in react. but here we need to understand one thing which is when data comes from parent component to child component that data is for read-only we can not change it in the child component. so now we need to create two component as follows.

Parent Component -->

export default function App() {
  return (
    <div className="App">
      <h1>Hello there !</h1>
      <h2>Lets learn Basic ES6 Destructuring !</h2>
    </div>
  );
}

Child Component -->

function Destructuring (props) {
  return (
  );
}

so we have created two component successfully. now declare the child function in parent function and set values that you want to pass to the child component

export default function App() {
  return (
    <div className="App">
      <h1>Hello there !</h1>
      <h2>Lets learn Basic ES6 Destructuring !</h2><br/>
      <Destructuring songName="Hotline Bling" singerName="Drake" />
    </div>
  );
}

after the h2 tag you can see we declare Destructuring function and we have pass two values in it. Now let's go to the child component and accept the value from the parent component.

function Destructuring (props) {
  return (
    <h1>
      Singer name {props.singerName} & Song name {props.songName}
    </h1>
  );
}

after this, you will get output like this as shown in the below image

In the above part, we saw how two component can exchange data by using props now the incoming part we will see how to do destructuring. so in destructuring, we use curly brackets to declare them in the child component.

function Destructuring({ singerName, songName }) {
  return (
    <h1>
      Singer name {singerName} & Song name {songName}
    </h1>
  );
}

so this is how destructuring is done. Once you destructure your props, you can get rid of props / this.props in front of each prop. after destructuring your code look nicer, more succinct, and like someone who knows what they’re doing wrote it. this is also know as Syntactic Sugar.

for extra knowledge, there is another way to write this code as shown below

function Destructuring(props) {
  const { singerName, songName } = props
  return (
    <h1>
      Singer name {singerName} & Song name {songName}
    </h1>
  );
}

So, that's it for today. in this blog we saw how to use props and how to do restructuring in React. I hope you enjoyed it

will meet in the next blog 😉

until then bbye Thank You!

Everything you can imagine is REAL ✨