What is the meaning of
{...this.props}
I am trying to use it like that
<div {...this.props}> Content Here </div>
This question is related to
reactjs
It's ES6 Spread_operator
and Destructuring_assignment
.
<div {...this.props}>
Content Here
</div>
It's equal to Class Component
const person = {
name: "xgqfrms",
age: 23,
country: "China"
};
class TestDemo extends React.Component {
render() {
const {name, age, country} = {...this.props};
// const {name, age, country} = this.props;
return (
<div>
<h3> Person Information: </h3>
<ul>
<li>name={name}</li>
<li>age={age}</li>
<li>country={country}</li>
</ul>
</div>
);
}
}
ReactDOM.render(
<TestDemo {...person}/>
, mountNode
);
or Function component
const props = {
name: "xgqfrms",
age: 23,
country: "China"
};
const Test = (props) => {
return(
<div
name={props.name}
age={props.age}
country={props.country}>
Content Here
<ul>
<li>name={props.name}</li>
<li>age={props.age}</li>
<li>country={props.country}</li>
</ul>
</div>
);
};
ReactDOM.render(
<div>
<Test {...props}/>
<hr/>
<Test
name={props.name}
age={props.age}
country={props.country}
/>
</div>
, mountNode
);
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
<div {...this.props}> ... </div>
in you child component, you will receive all your parent props.
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
.
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.
Source: Stackoverflow.com