[React]Props drilling not working[solved]

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. :blush:

If you are receiving status 500 error, that means it has correctly reached to your backend but the server was not responsive and wasn’t able to process your request.

Thank you for your response. :slightly_smiling_face: I will read your link and talk about this issue to the person who is doing the back-end development. :wink: