Form Submit React and Rails

Question

I am super new to React. Basically I have two components for now. My SearchInput-Component is a Select for cities, which does a real time search. It works super good and looks like this:

I added this component to my CityForm Component, which is a Search Form which I need to submit. And here I am stuck. For now I have just checked if submit works with a simple alert.

class CityForm extends React.Component {

  handleSubmit(event) {
    alert('Try tomorrow')
  }
 
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
                <SearchInput placeholder="search city" style={{ width: 200 }} />
      </form>

    );
  }
}


ReactDOM.render(
    <CityForm />,   
    document.getElementById('react-form')
);

I was thinking that submit should be kind of a post request. For now my URL won't change when I submit and I kind of need to do the post request to some kind of URL. The url for post would be smth. like

filter?[city_id_eq]=02000000&commit=Search

Am I thinking right? But also, I will need to get the city_id from the Select, which will basically always have a value before submit. Should set the value of the state of handleSubmit to the value of the select and how do I do this?

Maybe it's relevant, that's what I render in SearchInput

render() {
    const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
    return (
      <Select
        showSearch
        value={this.state.value}
        placeholder={this.props.placeholder}
        style={this.props.style}
        defaultActiveFirstOption={false}
        showArrow={false}
        filterOption={false}
        onSearch={this.handleSearch}
        onChange={this.handleChange}
        notFoundContent={null}
      >
        {options}
      </Select>
    );

Answer 1

First You create a new value state in Your CityForm component and remove the value state from SearchInput component. In other words, lift the state up. Afterwards, You can update CityForm new value state in SearchInput via callback function. Something in the lines of: https://symfonycasts.com/screencast/reactjs/callback-props Then You will have the city id available in CityForm component's state.

Second, use use, eg, Axios to make the form post request. https://www.digitalocean.com/community/tutorials/react-axios-react#step-3-%E2%80%94-making-a-post-request

PS Look into React hooks once You get a little more comfortable with React components. ;)