How to pass to the form the dropdown selection of an API result

Question

I created a form in React that searches for data from an API, and I need that in one of the form fields at the time of registration return the values of a second API (which has ID relation to the first)

I created a Component that makes the GET of this second API and renders it already in dropdows using React Select

my code with the listing and Modal to create a new record is this:

import React, { Component } from 'react';

import Selected from './selectedItems';

import axios from "axios";

   

const url="http://localhost:8080/api/";


class App extends Component {

  state={
    data:[],
    modalInsert: false,
    modalDelete: false,
    form:{
      id: '',
      name: '',
      idTab2:'',
      nameTab2:'',
      tipoModal: ''
    }
  }

  metodOnGet=()=>{
  axios.get(url).then(response=>{
    this.setState({data: response.data});
  }).catch(error=>{
    console.log(error.message);
  })
  }

  metodOnPost=async()=>{
    delete this.state.form.id;
  await axios.post(url,this.state.form).then(response=>{
      this.modalInsert();
      this.metodOnGet();
    }).catch(error=>{
      console.log(error.message);
    })
  }

  metodOnPut=()=>{
    axios.put(url+this.state.form.id, this.state.form).then(response=>{
      this.modalInsert();
      this.metodOnGet();
    })
  }

  metodOnDelete=()=>{
    axios.delete(url+this.state.form.id).then(response=>{
      this.setState({modalDelete: false});
      this.metodOnGet();
    })
  }

  modalInsert=()=>{
    this.setState({modalInsert: !this.state.modalInsert});
  }

  selecionarDataApi=(dataApi)=>{
    this.setState({
      tipoModal: 'atualizar',
      form: {
        id: dataApi.id,
        name: dataApi.name,
        idTab2: dataApi2.idTab2,
        nameTab2: dataApi2.nameTab2

      }
    })
  }

  handleChange=async e=>{
  e.persist();
  await this.setState({
    form:{
      ...this.state.form,
      [e.target.name]: e.target.value
    }
  });
  console.log(this.state.form);

  }

  componentDidMount() {
    this.metodOnGet();
   
  }
  

  render(){
    const {form}=this.state;
    return (
        <>
        <Navbar />
          <div className="content-wrapper">
            <section className="content">
              <div className="card card-primary">
              <div className="card-header">
                <h3 className="card-title">Data Sources</h3>
              </div>
              <button className="btn btn-success" onClick={()=>{this.setState({form: null, tipoModal: 'inserir'}); this.modalInsert()}}>Add Data Sources</button>
              <br />
              <br />
              <table className="table ">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Name Tab2</th>
                    <th>Opções</th>
                  </tr>
                </thead>
                  <tbody>
                    {this.state.data.map(dataApi=>{
                    return(
                    <tr key={dataApi.id}>

                      <td>{dataApi.id}</td>
                      <td>{dataApi.name}</td>
                      <td>{dataApi.nameTab2}</td>
                      <td>
                      <button className="btn btn-primary" onClick={()=>{this.selecionarDataApi(dataApi); this.modalInsert()}}><FontAwesomeIcon icon={faEdit}/></button>
                      {" "}
                      <button className="btn btn-danger" onClick={()=>{this.selecionarDataApi(dataApi); this.setState({modalDelete: true})}}><FontAwesomeIcon icon={faTrashAlt}/></button>
                      </td>
                    </tr>
                    )
                    })}
                  </tbody>
              </table>
              
              <Modal isOpen={this.state.modalInsert}>
              <ModalHeader style={{display: 'block'}}>
              <span style={{float: 'right'}} onClick={()=>this.modalInsert()}>x</span>
              </ModalHeader>
              <ModalBody>
              <div className="form-group">

              <label htmlFor="name">Name</label>
              <input className="form-control" type="text" name="name" id="name" onChange={this.handleChange} value={form?form.name: ''}/>
              <br />
              <br />
              <label htmlFor="idConnector">Name Tab2</label>
              <Selected />
              </div>
              </ModalBody>
              
              <ModalFooter>
              {this.state.tipoModal==='inserir'?
              <button className="btn btn-success" onClick={()=>this.metodOnPost()}>
              Inserir
              </button>: <button className="btn btn-primary" onClick={()=>this.metodOnPut()}>
              Atualizar
              </button>
              }
              <button className="btn btn-danger" onClick={()=>this.modalInsert()}>Cancelar</button>
              </ModalFooter>
              </Modal>
              
              
              <Modal isOpen={this.state.modalDelete}>
              <ModalBody>
              Tem certeza que deseja deletar este DataSource?
              {/* {form && form.name} */}
              </ModalBody>
              <ModalFooter>
              <button className="btn btn-danger" onClick={()=>this.metodOnDelete()}>Sim</button>
              <button className="btn btn-secundary" onClick={()=>this.setState({modalDelete: false})}>Não</button>
              </ModalFooter>
              </Modal>
              </div>
            </section>
          </div>
        </>

    );
  }
}
export default App;

I don’t know if this is the best way to do it, but basically I have two API’s the first one is to have your registration without relying on ngm, the second one depends on the first one for the registration, when I sign up by modal it will open the dropdowslist and should return the list of names of the 1st API when I select the name need to pick and insert the ID of that name in the json of the form that will be filled and so do the post for the 2nd API

This is the list code for the dropdown list of the 1st API:

import React, { Component } from 'react'
import Select from 'react-select'
import axios from 'axios'


export default class App extends Component {

  constructor(props){
    super(props)
    this.state = {
      selectOptions : [],
      id: "",
      name: ''
    }
  }

 async getOptionsConnector(){
    const res = await axios.get('http://localhost:')
    const data = res.data

    const options = data.map(d=> ({
      "value" : d.id,
      "label" : d.name

    }))

    this.setState({selectOptions: options})

  }

  handleChange(e){
    console.log(e)
   this.setState({id:e.value, name:e.label})
  }

  componentDidMount(){
      this.getOptions();
      
  }
  

  render() {
    // console.log(this.state.selectOptions)
    return (
      <div>
        <Select options={this.state.selectOptions} onChange={this.handleChange.bind(this)}/>
       
      </div>
    )
  }
}

when I fill out the form it already mounts json to send via post, but does not enter the dropdowslist selection.

Someone could help ?