Reusable Floating Select Form Component : React and Bootstrap 5

Question

Trying to create a reusable Floating-Select form component by passing an array but unable to display the options list. I'd appreciate your help. Thank you.

const options_A = [
        { label: "AA", value: "AA" },
        { label: "BB", value: "BB" },
        { label: "CC", value: "CC" },
  ]

const FormSelect = () => {

const [selectedVal, setselectedVal] = useState(null)
const handleChange = (val) =>{
    setselectedVal(val)
  }
  <FloatingSelect 
      value={selectedGroup} 
      options={options_A } 
      onChange={e => handleChange(e)}
      className="p-4"
  />

Below is my reusable FloatingSelect.tsx

export interface IStateManagerProps extends StateManagerProps {
    children?: ReactNode
    className?: string
    invalid?: boolean
    options: any
}

export default ({
    options,
    className,
    invalid,
    ...props
}: IStateManagerProps) => {
    
    return (
        <div className="form-floating">
            <select className="form-select">
            {/* <option value="d">dfdf</option> */}
                { 
                    options.forEach(element => {
                        <option value={element.value}>{element.label}</option>
                    })
                }
            </select>
            <label><i className="bx bx-meh-blank"></i>Select</label>
        </div>
    )
}

Answer 1

use map instead of forEach.

options.map(element => ( 
      <option value={element.value}>{element.label}</option>
 ))