Hi everyone,
I am a beginner in React and have less than one year of coding, so I am in need of a bit of heIp.
Now, I am doing a quiz application. So, in order to submit the choosen answer I did some props drilling with the « getTest » function. But I don’t know why I get an error 500 when I click on my submit button. What did I do wrong in my code ?
Here is my code :
Quiz.js
class Quiz extends Component {
constructor(props) {
super(props);
this.state = {
test: afficheInit,
appSession: appSession,
};
}
componentDidMount() {
this.getTest(this.state);
}
getTest(apiRequest) {
fetch("https://someAPI.html", {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'text/plain'
},
body: JSON.stringify(apiRequest),
})
.then(response => response.json())
.then(data => {
console.log(data)
this.setState({
test: data,
});
});
}
render() {
if (appSession) {
return (
<MDBCardBody>
<DisplayQuizz test= {this.state.test} selectTest={this.getTest}/> {
</MDBCardBody>
);
}
}
}
export default Quiz;
DisplayQuizz.jsx
class DisplayQuizz extends Component {
constructor(props) {
super(props);
this.state = {
responseContainer: "?"};
}
chargeReponseClick(responseValue) {
this.setState({responseContainer: responseValue});
}
render () {
const{test, selectTest} = this.props
const questions = test.questionElements.map(questionElement =>
<span key={questionElement.id}>
{questionElement.questionElement === "empty" ?
(<ReponseQuiz response={this.state.responseContainer }/>) : (questionElement.questionElement)}
</span> )
const displayReponses = test.reponses.map(reponse => <MDBBtn className='response' key={reponse.id} onClick={() => this.chargeReponseClick(reponse.reponse)}>{reponse.reponse} </MDBBtn>)
return (
<GenerateTest responseContainer={this.state.responseContainer } test={test} selectTest={() => selectTest({test}, this.state.responseContainer , console.log({test, selectTest}, this.state.responseContainer ))}/>
</div>
);
}
}
export default DisplayQuizz;
And lastly my dumb component :
submitTest.jsx
const SubmitTest = ({ selectTest}) => {
return (
<div className="submitTest">
<MDBBtn onClick={selectTest}>Submit</MDBBtn>
</div>
);
};
export default SubmitTest;
Thank you for reading me until here and I hope some kind persons will be able to explain me why my props drilling is not working.