React, useState - Why can not retrieve the state value when passing as (props) but can when passing ({props})?

Question

Same as title! Why can not retrieve the state value when passing as (props) but can when passing ({props})?

Code example:

import React, { useState } from 'react'

const Header = (props) => {
  return (
    <div>
      <h1>{props.text}</h1>
    </div>
  )
}

const Button = (props) => (
  <button onClick={props.handleClick}>
    {props.text}
  </button>
)

const Statistic = props => ( <div><h2>{props.text}</h2></div>)

const Statistics = ({props}) =>{
  const total = props.good + props.neutral + props.bad

  console.log("total", total)

  return(
    <div></div>
  )
}

const App = () => {
  // save clicks of each button to its own state
  const [clicks, setClicks] = useState({
    good: 0, neutral: 0, bad: 0
  })

  const setClickToValue= newValue => {
    setClicks(newValue)
  }



  return (
    <div>
      <Header text="Give feedback" />
      <Button handleClick={ () => setClickToValue(clicks.good + 1) } text="Good" />
      <Button handleClick={ () => setClickToValue(clicks.neutral + 1) } text="Neutral" />
      <Button handleClick={ () => setClickToValue(clicks.bad + 1) } text="Bad" />

      <Statistic text="Statistics" />
      <Statistics props={clicks} />
    </div>
  )
}

export default App

I lost an hour to figure out that passing as ({props}) was the correct way. But I still do not understand whats happening, could someone kindly elaborate?

Thanks folks!

Answer 1

the reason is because you have a prop call props. <Statistics props={clicks} />

so the son component gets this as props

props = {
  props: clicks
}

so when you use it like this

const comp = props => {
  props.good
}

it breaks or so because props only have prop call props

what you have to do is some like

<Statistics {...clicks} />

now at yow Statistics component you'll get them props correct

const Statistics = props => {
  console.log(props) // {good: 0, neutral: 0, bad: 0}

}

Answer 2

Thats because react functional component has default argument called props that is an object. To access the the props object we can access by . or [] notation for eg., props.name and javascript also as functionality called object destruction suppose i have object

let obj = {a:123,b:1243}
// i can directly access the object property by destructuring
 let {a} = obj;
 console.log(a)
//output 123

take look at destructuring --->