CODEWITHSUNDEEP
reactjs
Shashika Virajh
Shashika Virajh

Reputation: 9477

React functional component destructuring

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>
  )
}

Upvotes: 4

Views: 21147

Answers (2)

prabin badyakar
prabin badyakar

Reputation: 1736

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

Upvotes: 8

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15698

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.

Upvotes: 9

Related Questions