Estoy migrando de React-Bootstrap v1 a v2 y de Bootstrap v4 a v5, pero me enfrento al problema de Form.Select que me da un error que dice "Property 'Select' does not exist on type 'Form'" . Estoy tratando de usar Form.Select porque la documentación de migración dice que:
FormControl# dropped as prop supporting select tags in favor of FormSelect.Mi componente original se veía así:
import Form, { FormProps } from 'react-bootstrap/Form'; return ( <Form.Control as="select" value={selected || ''} onChange={(ev: ChangeEvent<HTMLSelectElement>) => onSelect(ev.target.value)} {...rest} style={{ width: 'fit-content', paddingRight: 20, ...rest.style }} // Styled Components break the Form.Control's base styles > <option hidden key="default-empty-option" /> {options.map(({ value, label }, idx) => ( <> {value === customOptionValue ? ( <> <option data-testid={`dropdown-option-${idx}`} key={idx} value={value}> {label} </option> <OptionSeperator key="separator" /> </> ) : ( <option data-testid={`dropdown-option-${idx}`} key={idx} value={value}> {label} </option> )} </> ))} </Form.Control>Y mi nuevo se ve así:
return ( <Form.Select value={selected || ''} onChange={(ev: ChangeEvent<HTMLSelectElement>) => onSelect(ev.target.value)} style={{ width: 'fit-content', paddingRight: 20, ...rest.style }} // Styled Components break the Form.Control's base styles > <option hidden key="default-empty-option" /> {options.map(({ value, label }, idx) => ( <> {value === customOptionValue ? ( <> <option data-testid={`dropdown-option-${idx}`} key={idx} value={value}> {label} </option> <OptionSeperator key="separator" /> </> ) : ( <option data-testid={`dropdown-option-${idx}`} key={idx} value={value}> {label} </option> )} </> ))} </Form.Select> );