Which is a better way to use Props in React?

Question

What is the difference between the two and which one is better?

const Person=({firstName,lastName})=>{
    return(
    <div>
    <p>{'${firstName}${lastName}'}</p>
    </div>
    )
    }

or

const Person=(props)=>{
return(
<div>
<p>{props.firstName}{props.lastName}</p>
</div>
)
}

Answer 1

Actually the first one should be :-

const Person=({firstName,lastName})=>{
    return(
    <div>
    <p>{'${firstName}${lastName}'}</p>
    </div>
    )
    }

You need to destructure the properties from the props object which React makes for you.

There is no one good or bad here. Both can serve your purpose. Use the second one where writing props.blabla becomes a headache for you and where the blabla alone makes more sense to use.

Edit - @xflorin94 added a good example where you only extract the required properties from the props object that are relevant for current component usage and you can use ... to get the rest of the properites and pass them to some other ChildComponent , function, hook etc wherever you can make use of it.