React functional component destructuring

user_5775871 0
Viewed 14405

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>
  )
}
reactjs
2 Answers

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.

user_100309700

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,
})
user_43336680
Related