React-js & Typescript & React-bootstrap types-CodePudding

in my project I have login form, and all the elements I save in array like this:

const inputs: [*****] = [
    <Form.Group>
      <Form.Label>username</Form.Label>
      <Form.Control
        placeholder="enter username"
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          setUsername(e.target.value)
        }
        value={username}
      ></Form.Control>
    </Form.Group>,
    <Form.Group>
      <Form.Label>password</Form.Label>
      <Form.Control
        placeholder="enter password"
        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
          setPassword(e.target.value)
        }
        value={password}
      ></Form.Control>
    </Form.Group>,
    <Button variant="primary">Login</Button>,
  ];

I want to render this array with map function but I dont know what type I need to write over the **** I put up. how can I know the type?

CodePudding user response：

If you are using Visual Studio Code, you can remove the type, and then click the refactor shortcut (Ctrl.) over the variable. Once the menu pops up, click on Infer type (or something similar), which will automatically set the type.

However, as it is a list of components, you can try the type: React.ReactNode[]

Note that Typescript arrays are not defined with [<type-name>], but <type-name>[].