How to render the CloseIcon only when the image is inserted?

user_14875896 0
Viewed 58

I am trying to create a form similar to google forms. Whenever a user inserts image I want to preview the image. Now, I have created a function updateImageLink to update the state once user inserts image. The function is below:

updateImageLink = (link, position) => {
   let questions = [...this.state.questions];
   let i = position.question;

   if (position.option == null) {
      questions[i].questionImage = link;
   } else {
      var j = position.option
      questions[i].options[j].optionImage = link;
   }

   this.setState({ questions });
}

Suppose the user wants to delete the image so for that I have created a delete button and passed the function through onClick prop as follows:

<IconButton
   style={{
      marginLeft: "3px",
      marginTop: "-15px",
      zIndex: 999,
      backgroundColor: "lightgrey",
      color: "grey",
   }}
   size="small"
   onClick={() => {
      this.updateImageLink("", { question: i, option: null });
   }}
>
   <CloseIcon />
</IconButton>

Now, this code renders the CloseIcon even when there's no image. The problem is with binding the function. If I write:

onClick={this.updateImageLink("", { question: i, option: null })}

Then CloseIcon does not render and the state does not get updated as well.

The state of class is as follows:

this.state = {
            questions: [
                {
                    questionText: "Question 1",
                    questionImage:null,
                    options: [
                        { optionText: "Option 1",
                          optionImage: null },
                        { optionText: "Option 2",
                          optionImage: null },
                        { optionText: "Option 3",
                          optionImage: null },
                        { optionText: "Option 4",
                          optionImage: null }
                    ],
                    correctAnswer: ""
                }
            ],
            openUploadImagePop: false,
            imagePositionData: {
                question: null,
                option: null
            }
      }

So, how to render the CloseIcon only when the image is inserted?

reactjs javascript
1 Answers

I solved this question by updating the state as follows:

this.state = {
            questions: [
                {
                    questionText: "Question 1",
                    options: [
                        { optionText: "Option 1" },
                        { optionText: "Option 2" },
                        { optionText: "Option 3" },
                        { optionText: "Option 4" }
                    ],
                    correctAnswer: ""
                }
            ],
            openUploadImagePop: false,
            imagePositionData: {
                question: null,
                option: null
            }
        };
    }

Here as there's no questionImage or optionImage field the unnecessary CloseIcon rendering problem is solved. Whenever, image is uploaded questionImage or optionImage gets added in the state through updateImageLink function.

user_148758960
Related