What is the <div {...props}> in the below code?

Question

import React from 'react'

export default (props) => (
    <div {...props}>
        <svg focusable="false" fill="white" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"></path>
        </svg>
    </div>
)

In the above code we are passing props inside the div element. Let's not worry about the svg tag, but how the code is working from React perspective?

Answer 1

{...props} means we will pass all props/attributes to that element. For example, you have a few props like below

const { width, height, isOn, isRed } = props

If you want to pass all these props, the manual way can be

<div width={width} height={height} isOn={isOn} isRed={isRed}></div>

It's still good, but what if you have like 10 more props needing to pass?

The simple way can be

<div {...props}></div>

All props inside props will be passing automatically

You can check the full document here for better understanding