[React]Conditionally adding input fields[solved]

JavaScript
1

Hi everyone,:blush:

I made a form but now I need to add new input fields (and be able to write inside it) when the user is writing inside an existing input. Until now I was able to create a function which add a questionElement input field when clicking on a button which show when the questionElements[idx].id est supérieur à 2. But I can’t seem to find what I am missing to create a new input when the user is writing inside an existing empty input.

I would be really grateful if someone could help me figuring out what I am missing.:pray:

So here is my code :

FormTeacher.jsx

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

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

          {
            id : 4,
            reponse: ""
          },
          {
            id : 5,
            reponse: ""
          },
          {
            id : 6,
            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, id: idx+1};
    });

    this.setState({
      questionElements: newQuestionElements,
     });
}
submitHandler(event) {
    event.preventDefault();
    /*event.target.className += " was-validated";*/
  };

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

  };
addFormElement = (idx) => {
    this.setState({
      questionElements: this.state.questionElements.concat([{ id: idx+1, questionElement: "" }]),
    });
  };

  render() {
    const{evalStatus, selectTest, updateFormTeacher} = this.props;
    const{appConsigne, questionElements, reponses, reponseCorrecte} = this.state;
    const appMode = this.props.evalStatus.test.appMode;
    const appEtape = this.props.evalStatus.test.appEtape;

    const displayQuestions = this.state.questionElements.map((questionItem, idx) => (
      <div>
      <MDBInput
        key={idx}
        value={questionItem.questionElement}
        name="questionElements"
        onInput={this.changeHandler}
        type="text"
        id={questionItem.id.toString()}
        label="question"
        required
        onChange={this.handleQuestions(idx)}>
        <div className="valid-feedback">Looks good!</div>
      </MDBInput>
      {this.state.questionElements[idx].id > 2 ? (<button
              type="button"
              onClick={this.addFormElement}
              className="small"
            >
              +
      </button>) : ""}
      </div>
    ));
return (
      <MDBContainer>
        <MDBRow>
          <MDBCol>
            <MDBCard>
              <MDBCardBody>
                <div>
                  <form
                    className="needs-validation"
                    onSubmit={this.submitHandler}
                    noValidate
                  >
                    <MDBRow>
                     <MDBCol md="4">
                        {displayQuestions}
                      </MDBCol>
                      <MDBBtn color="success" type="submit" onClick={() => { updateFormTeacher({appMode, appEtape, appConsigne, questionElements, reponses, reponseCorrecte}); this.showDisplayQuizz()}}>
                      Preview
                    </MDBBtn>
                  </form>
                </div>
              </MDBCardBody>
              {this.state.isClicked === true ? (<DisplayQuizz evalStatus= {evalStatus} selectTest={selectTest} cancelForm={this.cancelForm} formData ={this.state} showDisplayQuizz={this.showDisplayQuizz}/>) : ""}
            </MDBCard>
          </MDBCol>
        </MDBRow>
      </MDBContainer>
    );
  }
}
2

can you put an example in a codepen?

3

Do you mean something like this: https://codesandbox.io/s/zxz03yjrk3

4

Thank you for your reply.

Yes I mean something like this. :blush:

5

Thank you for your reply. I would like something like jenovs codesandbox. :blush:

6

Then you should recreate your code in codesandbox so we can help you. Remove all the unnecessary parts and create a basic example that runs.

7

Thank you for your reply.

Ok, I will do it. But as I am using a custom API with a confidential link and have several components, I need to modify some code, so I am afraid I will not be able to upload it before tomorrow.

8

So here is my code without all the unnecessary code : https://codesandbox.io/s/v09j36nz73

9
10

Thank you very much for your help. :blush: I will study your code and hope someday I will become better at coding with React and be able to think about this kind of things by myself.

11