Updating state object inside an array from child component

manpreet Best Answer 2 years ago

First I want to apologize because I'm newbie using react, so for sure I'm doing something really messed up.

That said, I need to update a specific state at parent component from child component, i'm using a handler inside the parent component to handle all the state changes, but it doesn't seem to work when I have arrays and objects, also I can add objects into 'inpHotel' state, so far what I got:

Parent

state = {
    activeStep: 0,
    fade: false,
    inpDestino: null,
    inpPeriodo: null,
    inpHotel: [{
        "nomeHotel": null,
        "urlMenorPreco": null,
        "quartos":[]
    }],
    inpNome: null,
    inpEmail: null,
    inpCelular: null,
};

//Handle function
handleChange = input => e => {
    this.setState({ [input]: e.target.value });
};

Child

<Grid item xs={12}>
    <TextField
        defaultValue={values.inpHotel[length].quartos[i].categoriaQuarto}
        onChange={     
            handleChange(`inpHotel[${length}].quartos[${i}].categoriaQuarto`)
        }
    />
Grid>

EDIT 1

My state needs to look like this JSON

{
    "chCidade": 0,
    "dataCheckIn": "",  
    "dataCheckOut": "",  
    "nome": "",
    "sobrenome": "",
    "celular": "",
    "email": "",
    "hoteis":
    [
        {   
            "nomeHotel": "",
            "urlMenorPreco": "",
            "quartos":[{
                "categoriaQuarto": "",
                "menorPrecoDiaria": 0,
                "quantidadeAdulto": "",
                "criancas":[{"idade":0},{"idade":0}]
            },{
                "categoriaQuarto": "",
                "menorPrecoDiaria": 0,
                "quantidadeAdulto": 0,
                "criancas":[]
            }]
        },
        {
            "nomeHotel": "",
            "urlMenorPreco": "",
            "quartos":[{
                "categoriaQuarto": "",
                "menorPrecoDiaria": 0,
                "quantidadeAdulto": 0
                                                

                                                                                                        REPLY
                                                    
                                                
                                                


                                                    

                                                        
                                                            0
                                                            views 

                                                            0
                                                                likes 
                                                            
                                                            

                                                            0
                                                            shares

                                                            


    

         Facebook
        
         Twitter
        
        
         Linked In 
        
          WhatsApp