CODEWITHSUNDEEP
reactjstypescriptreact-bootstrap
Elad Gabay
Elad Gabay

Reputation: 3

React-js & Typescript & React-bootstrap types

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?

Upvotes: 0

Views: 410

Answers (1)

mddg
mddg

Reputation: 695

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>[].

Upvotes: 2

Related Questions