React: creating component for input- for reusable input box

 Login.js

Initially 

<div

          className={`${classes.control} ${

            emailstate.isValid === false ? classes.invalid : ''

          }`}

        >

          <label htmlFor="email">E-Mail</label>

          <input

            type="email"

            id="email"

            value={emailstate.value}

            onChange={emailChangeHandler}

            onBlur={validateEmailHandler}

          />

        </div>

Input.js

import React from "react";

import classes from './Input/Input.module.css'

const Input=(props)=>{

    return <div

    className={`${classes.control} ${

      props.isValid === false ? classes.invalid : ''

    }`}

  >

    <label htmlFor="{props.id}">{props.label}</label>

    <input

      type="{props.type}"

      id="{props.id}"

      value={props.value}

      onChange={props.onChange}

      onBlur={props.onBlur}

    />

  </div>

}

export default Input;

Login.js changed to

 <Input

          id="email"

          label="E-mail"

          type="email"

          isValid={emailIsValid}

          value={emailstate.value}

          onChange={emailChangeHandler}

          onBlur={validateEmailHandler}

        />