...props in react.js 16

Question

I don't really get what does {...props} do? I understand that you can 'unload' all the props easier this way, but what about a case that we don't have any props yet? for example, consider this code

const input = (props) =>{
    let inputElement = null;

    switch(props.inputtype) {
        case('input'):
            inputElement = <input className={classes.InputElement} {...props} />
            break;
        case('textarea'):
            inputElement = <textarea className={classes.InputElement} {...props} />
            break;
        default:
            inputElement = <input className={classes.InputElement} {...props} />;
    }

    return(
        <div className={classes.Input}>
            <label className={classes.Label}> {props.label} </label>
            {inputElement}
        </div>
    );
}

What does ...props do in this case, because we don't have any components here this is a fresh new component, does it mean that when i reuse this component i cna give it any props i want?

Answer 1

let's say

props = {
   propA: 'a',
   propB: 'B'
};

doing

<input className={classes.InputElement} {...props} />

is the same as

<input className={classes.InputElement} propA={'a'} propB={'B'} />

Answer 2

Adding {...props} to an element will take an object called props, containing key/value pairs, and pass them all to the element as props.

The name doesn’t even have to be {...props}. You can pass it any object.

For example, instead of the following:

class FavouriteEmployee extends Component {
  render() {
    return <Employee name=“Dave” location=“New York” />;
  }
}

You could instead write:

class FavouriteEmployee extends Component {
  render() {
    const employeeDetails = {
      name: “Dave”,
      location: “New York”
    };
    return <Employee {...employeeDetails} />;
  }
}