How do create a Select Option(Dropdown List) by passing the Form Inputs as props to a Component in React?

Question

I want to create a reusable form component that renders based on inputs passed as props. The input fields are initialized as an array of objects as follows:

const userInputs = [
{
        id: "email",
        label: "Email",
        type: "text"
},
{
        id: "username",
        label: "Username",
        type: "text"
},
{
        id: "password",
        label: "Password",
        type: "password"
},
]

I then pass the userInputs as a prop to the User Component that will render the Form as follows:

<NewUser inputs={userInputs}/>

Then the Inputs will be mapped in the User Component as follows

const NewUser = ({ inputs }) => {

return (
<form>
 {inputs.map((input) => (
                         <div className="formInput" key={input.id}>
                          <label>{input.label}</label>
                            <input
                                  id={input.id}
                                  type={input.label}
                             />

                          </div>
                          )
             )
}
</form>
)

}

This renders well, however, I want to add a dropdownlist to the array of inputs. I have tried adding it like other inputs but that fails to render.

I assume this should be the implementation, but I think I am way off.

{
        id: "role",
        label: "Roles",
        type: "select",
        options: ["Admin","Basic"]
}

Answer 1

I have used seperate component for individual element tags(ex:input, select) as I think it is a best practice.

https://codesandbox.io/s/stackoverflow-6u05e7?file=/src/formInputs/FormExample.js:455-495