1

In my code there is one child component that receives props from parent which I'm mapping that array for render their name, add image button and one child's child component for render images (this is for avoiding rerendering images).

When I add an image child's child re-render it works fine but when I remove the image through child's child remove button then image is removed from a parent state but child's child not re-render because shouldComponentUpdate's old props and new props will be same.

Can anyone suggest why this is happening?

ChildComponent

import { TextField } from "@material-ui/core";
import React, { Component } from "react";

export default class ShowData extends Component {
  shouldComponentUpdate(newProps) {
    return !(this.props.data === newProps.data);
  }
  render() {
    const data = this.props.data; //this get data in array like [{name: "test", images: [..images]},{name: "test2", images: [..images]}]
    const update = this.props.update; //this will receive parent function for update state parameters (target, index, value,img-removeIndex)
    return (
      <div>
        {data.map((user, key) => {
          return (
            <>
              <TextField
                fullWidth
                id="outlined-basic"
                onChange={(e) => this.props.update("NAME", key, e.target.value)}
                value={user.name}
                variant="outlined"
              />
              <UserImages
                images={user.images}
                index={key}
                remove={this.props.update}
              />{" "}
              //child component
              <input
                type="file"
                onChange={(e) =>
                  this.props.update("ADD_IMG", key, e.target.files)
                }
              />
            </>
          );
        })}
      </div>
    );
  }
}

Child's Child Component

import React, { Component } from "react";

export default class UserImages extends Component {
  shouldComponentUpdate(newProps) {
    return !(this.props.images === newProps.images);
  }
  render() {
    const remove = this.props.remove;
    return (
      <div>
        {this.props.images.map((img, key) => {
          return (
            <>
              <img src={img} />
              <button
                onClick={() => remove("REMOVE_IMG", this.props.index, "", key)}>Remove
              </button>
            </>
          );
        })}
      </div>
    );
  }
}

Why new and old props are same when I console new and old prop then the image removed but old and new props value are newly updated image state value. that's why it won't re-render but the removed image still showing

buzatto
  • 9,704
  • 5
  • 24
  • 33
Deep Patel
  • 70
  • 7
  • Can you give a use case when you are passing new data to the `UserImages` component? – moshfiqrony Feb 13 '21 at 14:38
  • when remove clicked it calls parent and it removes image and setState value so it re-renders child and it passes new image array to UserImages – Deep Patel Feb 13 '21 at 14:42
  • if i removed shouldComponentUpdate then it works but it is not good idea because it re-renders all images include which not requires – Deep Patel Feb 13 '21 at 14:44
  • post your `this.props.update` implementation code from your parent if you can – buzatto Feb 13 '21 at 16:12

0 Answers0