reactjs - how to pass the value from two seperate react-select boxes

Question

I have two react-select boxes, created in two seperate .js files. I want to get the value from both selects and pass this to a backend node.js process - with the ressult displayed in render of the main app.js file

I can get it to work with one react-select box and all the code in one file, by passing the value of the select with the onChange function but can not see how to get the value from second select. Also not sure how to get the values back to the main app.js file

Ideally there should only be one handleChange and one handleSubmit

So my question is A, how do you pass a value back to a function on the parent script and B, how do you get the folue from both selects

Any help would be greatly appreciated

App.js

import React, { Component } from 'react';

import './App.css';
import axios from 'axios';
import Select from 'react-select';
import MyDateComponent from './dateselecter';
import MyCityList from './cityselecter';

var selectedOption="";
var selectedOption2="";


export default class MyList extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      cines: [],
    };
  }
 
  handleChange = selectedOption => {
    this.setState({ selectedOption });
    this.handleSubmit(selectedOption,selectedOption2); 
  }
 
  handleChange2 = selectedOption2 => {
    this.setState({ selectedOption2 });
    alert(selectedOption2.value);
    this.handleSubmit(selectedOption.value,selectedOption2.value); 
  }

  handleSubmit(c,d){  
    axios.get(`/api/groups/`, {
    params: {
      City: c,
      Date: d
    }
  })
    .then(res => {
      const cines = res.data;
      this.setState({ cines });
    })
    .catch((err) => {
      console.log(err);
    })
}

  render() {
    return (
      <div>
      <MyCityList />
      <MyDateComponent />
        <ul>
          { this.state.cines.map(cine => <li>* {cine.Name}</li>)}
        </ul>
      </div>
    )
  }
}

cityselecter.js

import React from 'react';
import Select from 'react-select';

const options = [
    { value: '', label: '' },
    { value: 'Lancaster', label: 'Lancaster' },
    { value: 'London', label: 'London' }
  ]

  export default class MyCityList extends React.Component {
    constructor(props) {
      super(props);
      this.handleChange = this.handleChange.bind(this);
       this.state = {
        selectedOption: null,
      };
    }
  
    render() {
      const { selectedOption } = this.state;
       return (
        <div>
          <Select
            id="mycity"
            value={selectedOption}
            onChange={this.handleChange}
            options={options}
          />
           </div>
        );
    }
}

dateselecter.js

import React from 'react';
import Select from 'react-select';

function GetDates(startDate, daysToAdd) {
    var aryDates = [];

    for (var i = 0; i <= daysToAdd; i++) {
        var currentDate = new Date();
        currentDate.setDate(startDate.getDate() + i);
        var dl=DayAsString(currentDate.getDay()) + ", " + currentDate.getDate() + " " + MonthAsString(currentDate.getMonth()) + " " + currentDate.getFullYear();
        var dv=currentDate.getFullYear() + "-" + currentDate.getMonth()+1 + "-" + currentDate.getDate();
        //alert(dv); 
        aryDates.push({value: dv, label: dl});
     
    }
   
    return aryDates;
}

function MonthAsString(monthIndex) {
   
    var month = new Array();
    month[0] = "January";
    month[1] = "February";
    month[2] = "March";
    month[3] = "April";
    month[4] = "May";
    month[5] = "June";
    month[6] = "July";
    month[7] = "August";
    month[8] = "September";
    month[9] = "October";
    month[10] = "November";
    month[11] = "December";

    return month[monthIndex];
}

function DayAsString(dayIndex) {
    var weekdays = new Array(7);
    weekdays[0] = "Sunday";
    weekdays[1] = "Monday";
    weekdays[2] = "Tuesday";
    weekdays[3] = "Wednesday";
    weekdays[4] = "Thursday";
    weekdays[5] = "Friday";
    weekdays[6] = "Saturday";

    return weekdays[dayIndex];
}

export default class MyDateComponent extends React.Component {
    constructor(props){
       super(props);
       this.handleChange2 = this.handleChange2.bind(this);
       this.state = {
        selectedOption2: "",
       }

    }

    render() {
        const { selectedOption2 } = this.state;
     
        var startDate = new Date();
        var aryDates = GetDates(startDate, 7);
       

        return (
          <div>
            <Select
            id="mydate"
            value={selectedOption2}
            onChange={this.handleChange2}
            options={aryDates}
        />
            
          </div>
        );
    }
}

question from:https://stackoverflow.com/questions/65850567/how-to-pass-the-value-from-two-seperate-react-select-boxes

Answer 1

Waitting for answers