OnChange function doesn't trigger when change occurs

Question

I have this code, where I have an object that represents a single choice question, I want to get the changes that are made inside it in the state of the app, so I can update my backend later

const EditableQuestion = ({handleChange,questionId,correctAnswer,points,text,ans1,ans2,ans3,ans4, ...otherProps}) => (
    <div className='editable-question'>
        <div className='question-text'>
            <textarea onChange={handleChange} name="text" id="" cols="30" rows="5" defaultValue={text}></textarea>
        </div>
        <div className='question-answers'>
            <div className='answer'><input type='radio' onChange={handleChange}  name={questionId} defaultChecked={1 === correctAnswer}/><input type='text' defaultValue={ans1}/></div>
            <div className='answer'><input type='radio' onChange={handleChange}  name={questionId} defaultChecked={2 === correctAnswer}/><input type='text' defaultValue={ans2}/></div>
            <div className='answer'><input type='radio' onChange={handleChange}  name={questionId} defaultChecked={3 === correctAnswer}/><input type='text' defaultValue={ans3}/></div>
            <div className='answer'><input type='radio' onChange={handleChange}  name={questionId} defaultChecked={4 === correctAnswer}/><input type='text' defaultValue={ans4}/></div>
        </div>
        <div className='points'>
        <input type='text' onChange={handleChange} defaultValue={points}/>
        <span>points</span>
        </div>
    </div>
)

export default EditableQuestion;

The main app code looks like this:

class QuizEdit extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            title : '',
            time : null,
            questionNr : 2,
            questions : [

                {
                    questionId : 1,
                    text : "This is a test question text",
                    ans1 : "Possible answer 1",
                    ans2 : "Possible answer 2",
                    ans3 : "Possible answer 3",
                    ans4 : "Possible answer 4",
                    correctAnswer : 1,
                    points: 5
                },

                {
                    questionId : 2,
                    text : "This is the second test question text",
                    ans1 : "Possible answer 1",
                    ans2 : "Possible answer 2",
                    ans3 : "Possible answer 3",
                    ans4 : "Possible answer 4",
                    correctAnswer : 2,
                    points: 10
                }
            ]
        }
    } 

    handleChange = event => {
        console.log("value");
    }

    render(){
        const {questions,questionNr} = this.state;
        return(
            <div className='quiz-edit'>
                <div className='quiz-question'>{
                        questions.map(({questionId,correctAnswer,points,text,ans1,ans2,ans3,ans4,...otherDraftProps}) => (
                            <EditableQuestion onChange={this.handleChange} key={questionId} questionId={questionId} text={text} ans1={ans1} ans2={ans2} ans3={ans3} ans4={ans4} correctAnswer={correctAnswer} points={points}{...otherDraftProps}/>
                        ))
                }
                </div>
            </div>
        )
    }
}

export default QuizEdit;

I have some dummy data in the state so I can test the code, when I type anything in the EditableQuestion component fields I expect the console.log from the handleChange function to get triggered. but it's not the case, nothing happens

Your component expects a handleChange but you pass it an onChange. Change onChange={this.handleChange} to handleChange={this.handleChange} — Gabriele Petrioli
– Gabriele Petrioli, Commented Aug 5, 2021 at 15:20

user12065892 · Accepted Answer · 2021-08-05 15:19:53Z

2

Your passing props and accessing props name are not same, that's why it's not rendering

Try like this

 <EditableQuestion handleChange={this.handleChange} key={questionId} questionId={questionId} text={text} ans1={ans1} ans2={ans2} ans3={ans3} ans4={ans4} correctAnswer={correctAnswer} points={points}{...otherDraftProps}/>

answered Aug 5, 2021 at 15:19

user12065892

Sign up to request clarification or add additional context in comments.

Comments

Abbasihsn · Accepted Answer · 2021-08-05 15:20:00Z

1

you should provide the name of props instead of onChange. instead of this:

<EditableQuestion onChange={this.handleChange} ...

use:

<EditableQuestion handleChange={this.handleChange} ...

answered Aug 5, 2021 at 15:20

Abbasihsn

2,1811 gold badge10 silver badges17 bronze badges

2 Comments

user12065892 Over a year ago

i have answered this, why you added duplicate answer?

Abbasihsn Over a year ago

when I answered it, you had not answered it yet!!! you can check the timing!

Collectives™ on Stack Overflow

OnChange function doesn't trigger when change occurs

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related