javascript - Pass props to another component and redraw the page

Question

In 1 component, when I click on the picture, I get its id, which I pass to another component via props. I need to receive these props every time and send a feth - request with the id of the image and then redraw the component. How to do it correctly?

first component

export default class Home extends Component {
constructor(props) {
    super(props);
    this.state = {
        error: null,
        isLoaded: false,
        isOpen: false,
        images: [],
        idImg: ''
    };

}
 openModal = (e) => {
    this.setState({ isOpen: true, idImg: e.target.id });
  }
render() {
    const {error, isLoaded, images} = this.state;

    if (error) {
        return <p>Error</p>
    } else if (!isLoaded) {
        return <p> Loading ... </p>
    } else {
        return (
            <div className="row align-items-center m-4" onChange={this.onSelect}>
                <Modal
                    isOpen={this.state.isOpen}
                    onCancel={this.handleCancel}
                    onSubmit={this.handleSubmit}
                    idImg={this.state.idImg}
                ></Modal>
                {images.map(item => (
                    <div key={item.image_id} className="col-lg-4 col-lg-4 sm-1 p-2" style={{Style}}  >
                        <img id={item.image_id} src={item.src} alt={item.src} onClick={this.openModal}></img>
                    </div>
                ))}
            </div>
        )
    }
}

2 component:

export default class Modal extends Component {
constructor(props){
    super(props);
    this.state = {
        imgSrc: ' ',
        commentList: [], 
        _id: this.props.idImg
    }
}


componentDidMount(){
    fetch(`./api/${this.state._id}`, {
        method: 'GET',
        })
    .then(res => res.json())
    .then((result) => {
        this.setState({
            isLoaded: true,
            imgSrc: result.src
        });
    },
    (error) => {
        this.setState({
            isLoaded: true,
            error
        });
    }
    );

question from:https://stackoverflow.com/questions/65897142/pass-props-to-another-component-and-redraw-the-page

Answer 1

 export default class Modal extends Component {
    constructor(props){
        super(props);
        this.state = {
            imgSrc: ' ',
            commentList: [], 
            _id: this.props.idImg
        }
this.nameFunction=this.nameFunction.bind(this);
    }
    
    
    componentDidMount(){
this.nameFunction();
        }
    componentDidUpdate(prevProps) {
        if (prevProps.idImg!== this.props.idImg) {
            this.setState({
                _id: this.props.idImg,
            })
        }
    }
nameFunction(){
fetch(`./api/${this.state._id}`, {
            method: 'GET',
            })
        .then(res => res.json())
        .then((result) => {
            this.setState({
                isLoaded: true,
                imgSrc: result.src
            });
        },
        (error) => {
            this.setState({
                isLoaded: true,
                error
            });
        }
        );
}