[React]Remove an item in an array function not working properly[solved]

JavaScript
1

Hi everyone,

I make a function to remove the empty array elements but it’s not working properly. I have to click on the submit button two times for it to be working (and I want to be working on one click).

So here is my code :

FormTeacher.jsx

const initState = {
  reponses: [
    {
      id : 0,
      reponse: ""
    },

    {
      id : 1,
      reponse: ""
    },
    {
      id : 2,
      reponse: ""
    },
    {
      id : 3,
      reponse: ""
    }
  ],
}

class FormTeacher extends React.Component {
  constructor(props) {
    super(props);
      this.state = initState
  }
removeEmptyAnswer = () => {
    const valueToRemove = "";
    this.setState(prevState => {
        const reponses = prevState.reponses.filter(answerItem => answerItem.reponse !== valueToRemove);
         console.log("remove", reponses);
        return {reponses};
    });
  }
render() {
const{updateFormTeacher} = this.props;
  const{reponses} = this.state;

const displayAnswers = reponses.map((answerItem, index) => {
       <MDBInput
        key={answerItem.id}
        value={answerItem.reponse}
        name="reponses"
        type="text"
        id={'displayAnswers'+answerItem.id.toString()}
        label="reponse"
        required
      onChange={this.handleAnswers(index)}>
        <div className="valid-feedback">Looks good!</div>
      </MDBInput>
  });

    return (
<MDBRow>
                      <MDBCol md="4" style={{ maxWidth: "8rem" }}>
                      <div>R: {displayAnswers}</div>

                      </MDBCol>
                    </MDBRow>
                    <MDBBtn color="success" type="submit" onClick={() => { updateFormTeacher({ reponses}); this.showDisplayQuizz(); this.removeEmptyAnswer()}}>
                      Preview
                    </MDBBtn>
{this.state.isClicked === true ? (<DisplayQuizz evalStatus= {evalStatus} selectTest={selectTest} cancelForm={this.cancelForm} formData ={this.state} showDisplayQuizz={this.showDisplayQuizz}/>) : ""}
);
  }
}

export default FormTeacher;

Quiz.jsx

const  afficheInit = {
  reponses: [],
}

class Quiz extends Component {
  constructor(props) {
    super(props);
    this.state = {
      test:  afficheInit,
    };
    
    this.updateFormTeacher = this.updateFormTeacher.bind(this);
  }

  updateFormTeacher(consigne) {
    this.setState({
      test: consigne
    }
  }

Is it not working because updateFormTeacher doesn’t know about removeEmptyAnswer ? What did I miss ?

I feel a bit stupid to ask help for this kind of things but I am still a newbie and I think it’s better to feel stupid now and move forward instead of carry on to be stuck. So I hope some kind people will be able to help me.:blush:

2

It’s hard to tell without seeing the whole code and without being able to try it out, but my guess would be it’s because one of the functions (maybe more) in onClick handler calls setState which is asynchronous (i.e. it may not execute immediately).

Try to leave only this.removeEmptyAnswer() in that click handler, but other two functions move to removeEmptyAnswer like this:

removeEmptyAnswer = () => {
  const valueToRemove = '';
  this.setState(
    prevState => {
      const reponses = prevState.reponses.filter(
        answerItem => answerItem.reponse !== valueToRemove
      );
      console.log('remove', reponses);
      return { reponses };
    },
    () => {
      updateFormTeacher({ reponses });
      this.showDisplayQuizz();
    }
  );
};
3

Thank you very much for your reply. :blush: I will try what your telling me.

In fact, I am working with a custom and private API (only the person I am working with and me can use it for now), so even if I can show you all the code, it will not be working.

4

Hello, there. I tried jenovs piece of advice but it’s not working. And I don’t know where is the problem for now, so I will think some more about it and clear my head by doing others tasks I need to do.

Anyways, thank you very much for the help. :smile:

5

It’s really unclear the relation between Quitz and FormTeacher.
How are they related?

Also, what’s the relation they have with data? They share the same information?

Anyway here’s a small example on updating state to remove empty data:
https://repl.it/@claudiorestifo/RosybrownFrigidTrees

6

Thank you for your reply.:blush: To answer your question, Quiz is the higher component in the component hierarchy and here is a little scheme of the relationship between Quiz and FormTeacher :

Quiz => Teacher => FormTeacher => DisplayQuizz => SubmitTest

Yes, they share the same information.

I tried doing your example. It works but the setState is not working at the right time. I think the problem is that setState is asynchronous but I don’t understand and can’t find where is the origin of this problem.

It will be long but here is the complete code of Quiz, FormTeacher, DisplayQuizz and SubmitTest without the API link (because it’s confidential. And it’s a private API, anyway) : https://gist.github.com/Yumenotsuki/8fdcf2e02aed6a2b326f6f19658011f9

7

Finally the person I am working with found the solution. I needed to add a condition in DisplayQuizz. That’s all.:sweat_smile:

Anyway, thank you everyone to kindly helped me.:blush: