Retrieve a selected option value in a component for React-bootstrap Form

Question

It is a Form that can retrieve value selected from a option.

import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import { useState } from "react";

export default function FormTestPage() {
  const [selected, setSelected] = useState("L1");
  const onSubmit = (event) => {
    event.preventDefault();
    console.log(event.target.value);
  };

  return (
      <Form onSubmit={onSubmit}>
          <Form.Group className="InputField">
          <Form.Label>Level</Form.Label>
          <Form.Control
            as="select"
            value={selected}
            onChange={(event) => setSelected(event.target.value)}
          >
            <option value="L1">L1</option>
            <option value="L2">L2</option>
            <option value="L3">L3</option>
          </Form.Control>
        </Form.Group> 
        <Button variant="primary" type="submit">
          Selected
        </Button>
      </Form>
  );
}

I am trying to split code to a component for re-using it, but the value selected cannot retrieve when submit button is clicked in FormTestPage:

FormTestPage

import SelectField from "../components/SelectField";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";

export default function FormTestPage() {
  const onSubmit = (event) => {
    event.preventDefault();
    console.log(event.target.value);
  };

  return (
      <Form onSubmit={onSubmit}>
        <SelectField onSubmit={onSubmit}/>
        <Button variant="primary" type="submit">
          Selected
        </Button>
      </Form>
  );
}

SelectField

import { useState } from "react";
import Form from "react-bootstrap/Form";

function SelectField(onSubmit) {
  const [selected, setSelected] = useState("L1");
  return (
    <Form.Group className="InputField">
      <Form.Label>Level</Form.Label>
      <Form.Control
        as="select"
        value={selected}
        onSubmit={(event) => {
          setSelected(event.target.value);
        }}
      >
        <option value="L1">L1</option>
        <option value="L2">L2</option>
        <option value="L3">L3</option>
      </Form.Control>
    </Form.Group>
  );
}

export default SelectField;

I tried also with useState variables passing as props to SelectField without success. Thanks

Answer 1

There was 2 issues in above code:

1. FormTestPage component has useState hook and will pass its variable to SelectField . It also will receive props.selected option. Noted that L1 is passed as default value in useState hook

2. SelectField component has to receive useState variable from FormTestPage and it onChange event for set the option selected by user.

FormTestPage

import SelectField from "../components/SelectField";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import { useState } from "react";

export default function FormTestPage() {
  const [selected, setSelected] = useState("L1");

  const onSubmit = (event) => {
    event.preventDefault();
    console.log(selected);
  };

  return (
      <Form onSubmit={onSubmit}>
        <SelectField selected=Selected setselected=setSelected/>
        <Button variant="primary" type="submit">
          Selected
        </Button>
      </Form>
  );
}

SelectField

export default function SelectField({ selected, setSelected }) {
 return (
   <Form.Group className="InputField">
     <Form.Label>Level</Form.Label>
     <Form.Control
       as="select"
       value={selected}
       onChange={(event) => {
         setSelected(event.target.value);
       }}
     >
       <option value="L1">L1</option>
       <option value="L2">L2</option>
       <option value="L3">L3</option>
     </Form.Control>
   </Form.Group>
 );
 }