What are props explicitly for?

Question

React

Why is the first line in the functional component explicitly listing properties {comments=[], isOpen, toggleOpen} instead of (props)? Does it have to do with using a decorator?

function CommentList ({comments=[], isOpen, toggleOpen}){
    const text = isOpen ? 'hide comments': 'show comments'
        return(
            <div>
                <button onClick={toggleOpen}>{text}</button>
                {getBody(comments,isOpen)}
            </div>
        )
}

function getBody(comments,isOpen) {
    if (!isOpen) return null
    if (!comments.length) return (
    <div>
        <p>No comments yet</p>
    </div>
    )
    return (
    <div>
        <ul>
            {comments.map(comment => <li key={comment.id} ><Comment comment={comment}/></li>)}
        </ul>
    </div>
    )
}

export default toggleOpen(CommentList)

And actually I have a second question about how a decorator works. Line

<OriginalComponent {...this.props} isOpen={this.state.isOpen} toggleOpen={this.toggleOpen}/>

- what ...this.props are passed here? WrappedComponent huh? What props does he have?

export default (OriginalComponent)=> class WrappedComponent extends Component {
    
    state = {
        isOpen: false
    }

 toggleOpen = (ev) => {
     ev && ev.preventDefault && ev.preventDefault()
        this.setState({
         
          commnetsIsOpen: !this.state.commnetsIsOpen  
        })
    }
    render() {
        return <OriginalComponent {...this.props} isOpen={this.state.isOpen} toggleOpen={this.toggleOpen}/>
    }
}

Answer 1

This is called object destructuring.