score:5

Accepted answer

props are available inside this.props for class based components. you don't need a constructor here

class title extends component {
  render() {
    const {name, title } = this.props
    return (
      <div classname="product-title">
        {name} <strong>{title}</strong>
      </div>
    );
  }
}

if i write that class based component to function based component we need to do it this way function title({ name, title }) why do we need brackets to wrap name and title there?

this is a pattern called destructuring assignment which makes it possible to unpack values from arrays, or properties from objects, into distinct variables

you can pass an object as parameter and only destructure it inside the function's body, or directly in the declaration

const user = {name: 'john', surname: 'doe'}
loguser(user)

const loguser = user =>{
   const { name, surname } = user

   console.log(name, surname)
}

is the equivalent of

const loguser = ({ name, surname }) => console.log(name, user)

since the only argument received by a functional component is props you can pass it like

<child foo='bar' />

and directly destructure the argument from props object

const child = ({ foo }) => <span> {foo} </span>

Related Query

More Query from same tag