React functional component destructuring

Question

I followed a react course on udemy. I can't understand the following code. What does this object after const InputGroup = (, does? I have seen tutorials use, props, but here props are not used. Instead an object is used.

const InputGroup = ({
  name,
  placeholder,
  value,
  error,
  icon,
  type,
  onChange,
  autoComplete,
}) => {
  return (
    <div className="input-group mb-3">
      <div className="input-group-prepend">
        <span className="input-group-text">
          <i className={icon} />
        </span>
      </div>
      <input
        type={type}
        className={classnames('form-control form-control-lg', {
          'is-invalid': error,
        })}
        placeholder={placeholder}
        name={name}
        value={value}
        onChange={onChange}
        autoComplete={autoComplete}
      />
      {error && <div className="invalid-feedback">{error}</div>}
    </div>
  )
}

Possible duplicate of [What do function parameter lists inside of curly braces do in es6?](https://stackoverflow.com/questions/37661166/what-do-function-parameter-lists-inside-of-curly-braces-do-in-es6) — JJJ, Jan 12 '19 at 08:40
Does this answer your question? [Destructured object as function parameter](https://stackoverflow.com/questions/58574905/destructured-object-as-function-parameter) — Michael Freidgeim, Oct 07 '20 at 09:21

score 9 · Accepted Answer · answered Jan 12 '19 at 08:47

Destructuring is a concept new to ES2015. Essentially you take the key from an object and store that key in a variable. The variable then contains the same value it had when it was a key-value pair inside the object.

So let's say you had an object, and that object is used as an argument for a function

{name: "Shashika", job: "Developer"}

So through destructuring, you can extract the values straight from the object like this

function({name, job}){
   console.log(name + "is a " + job)
}

In the case of your InputGroup component, you are destructuring the props object. You're turning each of those defined properties as variables ready to use. The overall benefit of this is to save time, avoiding typing props.name and etc for each property you want to use.

score 8 · Answer 2 · answered Jan 12 '19 at 08:49

Most probably when you learn, this was the code.

const InputGroup = (props) => {

// 1. Destructure props
const { name, placeholder } = props;

// OR you can use this but desturcture is the best option

// 2. Without destructure
const name = props.name;
const placeholder = props.placeholder

return (
    <div className="input-group mb-3">
      <div className="input-group-prepend">
        <span className="input-group-text">
          <i className={icon} />
        </span>
      </div>
      <input
        type={type}
        className={classnames('form-control form-control-lg', {
          'is-invalid': error,
        })}
        placeholder={placeholder}
        name={name}
        value={value}
        onChange={onChange}
        autoComplete={autoComplete}
     />
      {error && <div className="invalid-feedback">{error}</div>}
    </div>
    )
}

Here destructer is done on point 1, but what we can do it destructure at top level and can direct access the props attributes in the JSX like in your given code.

const InputGroup = ({
  name,
  placeholder,
})

The form with single parameter InputGroup = (props) => has an advantage, as it is allowed to pass all props to the children using {...props} — Michael Freidgeim, Oct 07 '20 at 09:00

React functional component destructuring

2 Answers2