React-js & Typescript & React-bootstrap types

Question

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?

mddg · Accepted Answer · 2022-04-26 08:38:46Z

2

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

answered Apr 26, 2022 at 8:38

mddg

7056 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Elad Gabay Over a year ago

Thank you very much, I am using VScode and React.ReactNode works.

Collectives™ on Stack Overflow

React-js & Typescript & React-bootstrap types

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related