[React]Updating specific state items[closed]

Hi everyone, :blush:

In my application I have a form who update the state in my App (which I named Quiz) and App display the preview of the data inputed on the form on a component named DisplayQuizz. Like this :

Before inputs:


After inputs :

Until now I have this code which is working :

FormTeacher.jsx

class FormTeacher extends React.Component {
  constructor(props) {
    super(props);
      this.state = {
        appConsigne: "",
        appEtape: "question",
        appMode: "ajout",
        questionElements: [
          {
            id: 0,
            questionElement: ""
          },
          {
            id: 0,
            questionElement:""
          },

          {
            id: 0,
            questionElement:""
          }
        ],
        reponseCorrecte: "",
        reponses: [
          {
            id : 0,
            reponse: ""
          },

          {
            id : 0,
            reponse: ""
          },
          {
            id : 0,
            reponse: ""
          },
          {
            id : 0,
            reponse: ""
          }
        ],
        };
      this.submitHandler = this.submitHandler.bind(this);
      this.changeHandler = this.changeHandler.bind(this);
  }


  handleQuestions = idx => evt => {
    const newQuestionElements = this.state.questionElements.map((questionItem, sid) => {
      if (idx !== sid) return questionItem;
      return { ...questionItem, questionElement: evt.target.value};
    });

    this.setState({
      questionElements: newQuestionElements,
     });

}

  handleAnswers = i => e => {
    const newReponses = this.state.reponses.map((answerItem, si) => {
      if (i !== si) return answerItem;
      return { ...answerItem, reponse: e.target.value };
});

this.setState({ reponses: newReponses });

}

  submitHandler(event) {
    event.preventDefault();
    event.target.className += " was-validated";
  };

  changeHandler(event) {
    this.setState({ [event.target.name]: event.target.value });
  };

  render() {
    const{evalStatus, selectTest, updateFormTeacher} = this.props;

    return (
      <MDBContainer>
        <MDBRow>
          <MDBCol>
            <MDBCard>
              <MDBCardBody>
                <div>
                  <form
                    className="needs-validation"
                    onSubmit={this.submitHandler}
                    noValidate
                  >
                    <MDBRow>
                      <MDBCol md="4">
                      
                        <MDBInput
                          value={this.state.appConsigne}
                          name="appConsigne"
                          onChange={this.changeHandler}
                          type="text"
                          id="materialFormRegisterNameEx"
                          label="consigne"
                          required
                        >
                          <div className="valid-feedback">Looks good!</div>
                        </MDBInput>
                      </MDBCol>
                    </MDBRow>
                    <MDBRow>
                      <MDBCol md="4">
                     
                        {this.state.questionElements.map((questionItem, idx) => (
                          <MDBInput
                            value={questionItem.questionElement}
                            name="questionElements"
                            onChange={this.changeHandler}
                            type="text"
                            id="materialFormRegisterNameEx"
                            label="question"
                            required
                          onChange={this.handleQuestions(idx)} >
                            <div className="valid-feedback">Looks good!</div>
                          </MDBInput>
                        ))}

                      </MDBCol>

                    </MDBRow>
                    <MDBRow>
                      <MDBCol md="4">
                      {this.state.reponses.map((answerItem, i) => (
                        <MDBInput
                          value={answerItem.reponse}
                          name="reponses"
                          onChange={this.changeHandler}
                          type="text"
                          id="materialFormRegisterNameEx"
                          label="reponse"
                          required
                        onChange={this.handleAnswers(i)}>
                          <div className="valid-feedback">Looks good!</div>
                        </MDBInput>
                      ))}
                      </MDBCol>
                    </MDBRow>
                    <MDBRow>
                      <MDBCol md="4">
                        <MDBInput
                          value={this.state.reponseCorrecte}
                          onChange={this.changeHandler}
                          type="text"
                          id="materialFormRegisterPasswordEx4"
                          name="reponseCorrecte"
                          label="reponse correcte"
                          required
                        >
                          <div className="invalid-feedback">
                            Please provide a valid correct response.
                          </div>
                          <div className="valid-feedback">Looks good!</div>
                        </MDBInput>
                      </MDBCol>
                    </MDBRow>
                    <MDBBtn color="success" type="submit" onClick={() => updateFormTeacher(this.state)}>
                      Submit Form
                    </MDBBtn>
                  </form>
                </div>
              </MDBCardBody>

            </MDBCard>
          </MDBCol>
        </MDBRow>
        <DisplayQuizz evalStatus= {evalStatus} selectTest={selectTest}/>
      </MDBContainer>
    );
  }
}

export default FormTeacher;

Quiz.js

const  afficheInit = {
  constat: null,
  instruction: null,
  questionElements: [],
  reponses: [],
  reponseCorrecte: null
}

class Quiz extends Component {

  constructor(props) {
    super(props);
    this.state = {
      test:  afficheInit,
      appSession: appSession,
    };
    this.getTest = this.getTest.bind(this);
    this.updateFormTeacher = this.updateFormTeacher.bind(this);
  }

updateFormTeacher(consigne) {
    this.setState({

      test: consigne
    },console.log("FormTeacher", consigne, this.state.test.appConsigne));
  }

But for my FormTeacher component to be working I need all the things writing in its state. However my boss wants to update only the updating state items and wants me to write only the updating state items. The updating items are :

appConsigne,

questionElements: [{id: 0, questionElement: &quot;&quot;},{id: 0, questionElement:&quot;&quot;}, {id: 0, questionElement:&quot;&quot;}],

reponseCorrecte: &quot;&quot;,

reponses: [{id : 0, reponse: &quot;&quot;}, {id : 0, reponse: &quot;&quot;}, {id : 0, reponse: &quot;&quot;}, {id : 0, reponse: &quot;&quot;}]

Do you have any advice on how I could do this ? :blush: And how can I make the handleAnswers and handleQuestions code easier to understand (because I found the code somewhere and modified it a bit for my application but this kind of writing is a bit hard for me to understand) ? Thanks in advance.:blush:

EDIT : As I am very confused about this functionality, I am closing the topic for now and think more about it first. I am very sorry to have bothered all of you.

Try writing it yourself instead of copying and pasting it, then you will truly understand it.

Which parts are you not understanding specifically?

I didn’t paste it though and I tried to write a bit differently but it didn’t work.

It’s the double arrows, I always forgot their meaning:

= idx => evt =>

I tried to write it like this :
handleQuestion(event, idx) {...}
but it didn’t work.

Arrow function syntax?

I understand when it something like this : onClick={() => this.chargeReponseClick(reponse.reponse)}

but I don’t understand when there is something like this : handleQuestions = idx => evt => {...}

What’s the difference ? Anyway thank you for your answer.:blush: