Select options value by default in second select form when selected option in first form

Question

I have this example json:

const json = [
        {
        "obj1": {
            obj1_1: {
               "obj1_1Final": 'Hellow"
            },
            obj1_2: {
               "obj1_2Final": "GoodBye"
            }               
        },
        "obj2": {
           obj2_1: {
               "obj2_1Final": "FinalObject"
           },
          obj2_2: {
               "obj2_2Final": "The en of the world"
              }         
         },         
        }
    ]

I try to select the three propperties to print. P.e: obj1 - obj1_2 - objt1_2Final

let infraOptions = json;

i use react final form and i have 3 fields like this:

<div className="col-md me-3">                            
   <label className="mt-3">
     InfraestructuraOp
    </label>
      <Field
         name='infraestructuraOp'
         component='select'
         className="col-md form-control form-select"
         id="infraestructuraOp"
      >
      <option defaultValue={''} >  </option>   
       {                                  
         infraOptions.map((te, i) =>                                   
         Object.keys(te).map(key => {                                
         return <option value={key} key={key}> {key} </option> 
          }))                                  
         }                              

      </Field>
   </div>

I would like that when i select "obj1" by default "obj1_1" would be selected. But i can not achieve this. if i use this inside de jsx component:

<div className="row">
                      <div className="col-md me-3">                            
                          <label className="mt-3">
                            InfraestructuraOp
                          </label>
                      <Field
                        name='infraestructuraOp'
                        component='select'
                        className="col-md form-control form-select"
                        id="infraestructuraOp"
                      >
                       <option defaultValue={''} >  </option>   
                        {                                  
                         infraOptions.map((te, i) =>                                   
                           Object.keys(te).map(key => {                                
                            return <option value={key} key={key}> {key} </option> 
                           }))                                  
                        }                               

                      </Field>
                    </div>
                    <div className="col-md me-3">
                      <label className="mt-3">
                        Sistema
                      </label>
                      <Field
                        name='sistema'
                        component='select'
                        className="col-md form-control form-select"
                        id="sistema"
                      >
                        
                       {                                
                        values.infraestructuraOp !== undefined ?                               
                        Object.keys(infraOptions[0][values.infraestructuraOp]).map(key2 => {                                  
                          return <option value={key2} key={key2}> {key2} </option> 
                        }) :  <option defaultValue={''} >  </option>                                                         
                        }                       

                      </Field>
                    </div>
                    <div className="col-md">
                      <label className="mt-3">
                        Producto
                      </label>
                      <Field
                        name='producto'
                        component='select'
                        className="col-md form-control form-select"
                        id="producto"
                      >                                                           
                        {/* here i can no the third level */}

                      </Field>
                    </div>
                  </div>

When i try to change the options in the first or second drop form i have an error in the third selector:

"Cannot convert undefined or null to object"

I think that i allway i have first and second option selected the third not send me an error. Someone can help me??

Here a executable exammple Form Example Thanks

Answer 1

Select options value by default in second select form when selected option in first form

In order to set the default option in the second select form, you can use JavaScript to detect the value of the first select form and then set the default value in the second select form accordingly. Here is an example of how this could work:

// Get reference to select elements

var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');

// Detect change in select1
select1.addEventListener('change', function() {
  var selectedOption = this.value;

  // Set default value in select2 based on selected value in select1
  if (selectedOption === 'option1') {
    select2.value = 'defaultOption1';
  } else if (selectedOption === 'option2') {
    select2.value = 'defaultOption2';
  }
});