[React]How to display nested objects in a JSON

Hi everybody,

I am a junior web developer. I have to display the second part of this JSON coming from an API(the data in retDonnees) with React but I can’t seem to find a solution after a lot of research. I even tried the Object.Keys.map method but I couldn’t get it work. And I would like to use the DisplayTest component to display it.

Here, you will found some of my present code, and I hope it would help. So, I would be very glad if some kind people could help me with this.

I am looking forward to hearing from you and thank you in advance.

JSON :

[
    {
        "retEntete": {
            "appMode": "evaluation",
            "appEtape": "init1",
            "appEtapeSuivante": "init2"
        },

        "retDonnees": {
            "constat": "Voici la question",
            "instruction": "Choisissez la bonne r\u00e9ponse TEST",
            "question1": "\u3053\u308c\u306f",
            "question2": "vide",
            "question3": "\u3067\u3059\u304b\u3002",
            "reponse1": "\u3071\u3093",
            "reponse2": "\u306b",
            "reponse3": "\u306a\u3093",
            "reponse4": "\u308f",
            "reponse_correcte": "\u306a\u3093"
        }
    }
]

App.js

import DisplayTest  from  './components/displayTest';
import GenerateTest from  './components/generateTest';


const  afficheInit = {
  constat: null,
  instruction: null
}

const appInit = {
  appMode: "evaluation",
  appEtape: "init1"


}

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {

      test:  afficheInit,
      envEntete: appInit, 
      retEntete: null 

    };
  }

  componentDidMount() {
    this.getTest(this.state);
  }

  getTest(param) {
      fetch("an API", {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'text/plain'
        },
        body: JSON.stringify(param),
      })
        .then(response => response.json())
        .then(data => {
          console.log(data)
          this.setState({
            test: data[0],
          });
        });
  }

  render() {
    
    if (mode === "Evaluation") {
    return (
      <MDBCol>
      <MDBCard>
        <MDBCardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" waves />
        <MDBCardBody>
            <DisplayTest test= {recupTest} />

          <GenerateTest selectTest={() => this.getTest()} />
        </MDBCardBody>
      </MDBCard>
    </MDBCol>

    );

  }  else {
    return (
      <MDBCol>
      <MDBCard>
        <MDBCardImage className="img-fluid" src="https://mdbootstrap.com/img/Photos/Others/images/43.jpg" waves />
        <MDBCardBody>
          <MDBCardTitle>???</MDBCardTitle>
          <MDBCardText>
            Oh!
          </MDBCardText>
          <MDBBtn href="#">Hey !</MDBBtn>
        </MDBCardBody>
      </MDBCard>
    </MDBCol>

    );
  }
}
}

export default App;

DisplayTest. Jsx

const  DisplayTest = ({test}) => {
    return (
      <div className="DisplayTest">
          <p className='superclasse'>
            {test.constat}
          </p>
          <MDBCardTitle className= 'super'>{test.instruction}</MDBCardTitle>
          <MDBCardText> {test.question1}</MDBCardText>
          <MDBCardText> {test.question2}</MDBCardText>
          <MDBCardText> {test.question3}</MDBCardText>
  
          <MDBBtn>{test.response1}</MDBBtn>
          <MDBBtn>{test.reponse2}</MDBBtn>
          <MDBBtn>{test.response3}</MDBBtn>
          <MDBBtn>{test.response4}</MDBBtn>


      </div>
    );

  }

  export default DisplayTest;

Hi everybody,

My boss found an answer for my problem. So could someone close this thread, please ?

Thank you in advance