CODEWITHSUNDEEP
javascriptreactjsfunctionproperties
akram
akram

Reputation: 111

Object or non-object function property, What is the difference?

by using "function(style)" it didn't work , but when using "function({style})" it worked, please explain why ?

the Right code:

export default function Title( { title } ) {
  return (
    <div className="section-title">
      <h4>{title}</h4>
      <div />
    </div>
  );
}

the Wrong code:

export default function Title( title ) {
  return (
    <div className="section-title">
      <h4>{title}</h4>
      <div />
    </div>
  );
}

Upvotes: 0

Views: 69

Answers (1)

gdh
gdh

Reputation: 13682

The functional components get props object as argument.

With below line of code you are destructuring the title prop, which is correct.

export default function Title( { title } )

Here below, you are receiving title as object and rendering it which is wrong because, in react you cannot render objects.

export default function Title( title ) {
  return (
    <div className="section-title">
      <h4>{title}</h4>
      <div />
    </div>
  );
}

Another correct way is

export default function Title( props ) {
  return (
    <div className="section-title">
      <h4>{props.title}</h4>
      <div />
    </div>
  );
}

Upvotes: 1

Related Questions