Mobile Technologies Web Technologies Digital Marketing Creative Design Career Talk Medical General Tech Interviews Internet Of Things

Embark on a journey of knowledge! Take the quiz and earn valuable credits.

Take A Quiz

Challenge yourself and boost your learning! Start the quiz now to earn credits.

Take A Quiz

Unlock your potential! Begin the quiz, answer questions, and accumulate credits along the way.

Take A Quiz

Popular Categories

Interview Questions
QuestionBank
Quantitative Aptitude
Engineering
Govt Exams
Digital Marketing
Management
Interviews
All

Updating state object inside an array from child component

General Tech Bugs & Fixes 2 years ago

0 4 0 0 0 tuteeHUB earn credit +10 pts
5 Star Rating 1 Rating
Previous Next

Posted on 16 Aug 2022, this text provides information on Bugs & Fixes related to General Tech. Please note that while accuracy is prioritized, the data presented might not be entirely correct or up-to-date. This information is offered for general knowledge and informational purposes only, and should not be considered as a substitute for professional advice.

Take Quiz To Earn Credits!

Turn Your Knowledge into Earnings.

tuteehub_quiz

Answers (4)

Post Answer
profilepic.png
manpreet Tuteehub forum best answer 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
                                                
                                                


                                                    

                                                        
                                                            0
                                                            views 

                                                            
                                                            

                                                            0
                                                            shares
profilepic.png
manpreet 2 years ago

You are calling the function handleChange() directly and it will return undefined. So you are setting onChange event to undefined.You could use wrapper function

onChange={() => handleChange(`inpHotel[${length}].quartos[${i}].categoriaQuarto`)}

0 views   0 shares
profilepic.png
manpreet 2 years ago

You are calling the function handleChange() directly and it will return undefined. So you are setting onChange event to undefined.You could use wrapper function

onChange={() => handleChange(`inpHotel[${length}].quartos[${i}].categoriaQuarto`)}

0 views   0 shares
profilepic.png
manpreet 2 years ago

You are calling the function handleChange() directly and it will return undefined. So you are setting onChange event to undefined.You could use wrapper function

onChange={() => handleChange(`inpHotel[${length}].quartos[${i}].categoriaQuarto`)}

0 views   0 shares

No matter what stage you're at in your education or career, TuteeHub will help you reach the next level that you're aiming for. Simply,Choose a subject/topic and get started in self-paced practice sessions to improve your knowledge and scores.

Q

What is the full form of NABARD ?

Banking, Finance & Insurance
Q

How to refresh app upon shaking the device?

Mobile Technologies
Q

What are the govt exams after BCA?

Career Talk
Q

TYPO3 v8. Override function in Core class

General Tech
Q

Why do people in India give so much importance to Government jobs?

Commerce & Accounting
Q

<div>zkskKsk</div>

Mobile Technologies 0 Answers
Q

<span style="font-size: 1em;">Qwerty 4</span>

Digital Marketing 0 Answers
Q

<div>What are the key differences between AMOLED and LCD displays in smartphones?</div>

Mobile Technologies 0 Answers
Q

<div>What are the key challenges in Mobile App Development for Cross-Platform Solutions?</div>

Mobile Technologies 0 Answers
Q

who is the smallest man in the world

General Tech 0 Answers

Explore Other Libraries

Blogs Tutorials Question Bank Feeds Careernews

Tags

state object array child component

Important General Tech Links

 Bugs & Fixes
 Technology & Software
 Learning Aids/Tools
 QA/Testing