What is the meaning of this props in Reactjs

Question

What is the meaning of       this props    I am trying to use it like that    lt div     this props  gt  Content Here  lt  div gt

User · Answer

It is ES-6 feature  It means you extract all the properties of props in  div         operator is used to extract properties of an object

User · Answer

It s called spread attributes and its aim is to make the passing of props easier   Let us imagine that you have a component that accepts N number of properties  Passing these down can be tedious and unwieldy if the number grows    lt Component x    y    z      gt    Thus instead you do this  wrap them up in an object and use the spread notation  var props     x  1  y  1  z 1     lt Component     props    gt    which will unpack it into the props on your component  i e   you  never  use      props  inside your render   function  only when you pass the props down to another component  Use your unpacked props as normal this props x

User · Answer

You will use props in your child component  for example   if your now component props is       booking  4     isDisable  false     you can use this props in your child compoenet    lt div     this props  gt       lt  div gt    in you child component  you will receive all your parent props

User · Answer

It will compile to this   React createElement  div   this props   Content Here      As you can see above  it passes all it s props to the div

User · Answer

It s ES6 Spread operator and Destructuring assignment   lt div     this props  gt    Content Here  lt  div gt   It s equal to Class Component const person         name   quot xgqfrms quot       age  23      country   quot China quot      class TestDemo extends React Component       render             const  name  age  country        this props              const  name  age  country    this props          return              lt div gt                 lt h3 gt  Person Information   lt  h3 gt                 lt ul gt                   lt li gt name  name  lt  li gt                   lt li gt age  age  lt  li gt                   lt li gt country  country  lt  li gt                 lt  ul gt             lt  div gt                      ReactDOM render       lt TestDemo     person   gt        mountNode       or Function component const props         name   quot xgqfrms quot       age  23      country   quot China quot      const Test    props    gt      return       lt div         name  props name          age  props age          country  props country  gt          Content Here          lt ul gt             lt li gt name  props name  lt  li gt             lt li gt age  props age  lt  li gt             lt li gt country  props country  lt  li gt           lt  ul gt       lt  div gt           ReactDOM render       lt div gt           lt Test     props   gt           lt hr  gt           lt Test              name  props name              age  props age              country  props country            gt       lt  div gt        mountNode      refs  https   babeljs io docs plugins transform-object-rest-spread   https   facebook github io react docs components-and-props html

[reactjs] What is the meaning of {...this.props} in Reactjs

Examples related to reactjs