The spread operator uses three periods to expand an object’s properties into a JSX element or component. Instead of listing every property separately, write <Post {...post} /> to pass the object’s properties together. section 3.2.5
Pass menu properties through
A component can handle important properties itself and forward the rest to its target element: function MenuItem({ label, href, ...rest }) { return ( <li className="menu-item"> <a className="menu-link" href={href} {...rest}> {label} </a> </li> ); } Here, label and href receive special treatment, while properties such as target or id pass through. The same three-dot syntax is called rest when collecting remaining properties during destructuring and spread when applying them. section 4.1.4
Use spreading only when the object contains appropriate properties. Spreading every property can put irrelevant values on an element, and spreading props after an explicit value can override that value; <input value={this.value} {...this.props} /> therefore requires care. section 3.2.5 section 4.1.4
return <Post {...post} />;
See the compact JSX form for passing an object’s properties to a component. section 3.2.5
