React props(JSX)

user_14691338 0
Viewed 50

I was implementing a basic rating component in React and somehow i did this

const Rating = ( {text},{value}) => {
return (
   <div className='rating'>
    <span>
        <i className={value>=1?'fas fa-star':value>=0.5?'fas fa-star-half-alt':'far fa-star'}></i>
    </span>
    </div>
)}

instead of this

const Rating = ( {text,value}) => {
return (
   <div className='rating'>
    <span>
        <i className={value>=1?'fas fa-star':value>=0.5?'fas fa-star-half-alt':'far fa-star'}></i>
    </span>
    </div>
)}

Can anyone tell me why the value is not processed in the first part?

P.S. I am relatively new in the react/javascript field, so sorry if it's a very basic question.

jsx reactjs javascript
2 Answers

this means you are expecting 2 objects as arguments.

( {text},{value} )

this means you are expecting a single object as argument.

({ text, value })

When you create a component, you are normally only expecting one object argument, which we normally call it props.

const Component = (props) => {}

If you are expecting to use the component this way

<Component text="I am text" value="I am value" />

Then you can expect to use ({ text, value }) to restructure the props. Which is equivalent to

const Component = (props) => {
    const { text, value } = props
}
user_28220410

because this ({text},{value}) != ( {text,value}).

when you do this ({text,value}), you destructuring props.

user_67893730
Related