How to pass a function to another react component?

Question

Suppose I have this Icon component, which upon clicking opens a dialog box

export default class Icon extends Component {


    look (imgdes, i) {
        const openDialog=()=> {
                    document.getElementById(i).style.display = "block";
      }

        const  closeDialog=()=> {
                document.getElementById(i).style.display = "none";
      }
        return (
                <div key={i} onClick={openDialog}>
                    <Dialog closed={closeDialog}/>
                </div>
            );
        }


    render () {
        return (
                <div className="pro" >
                    {this.state.img.map(this.look)}
                </div>
        );
    }
};

this is dialog box component, which upon clicking the X made by span tag should close it

    export default class Dialogbox extends Component {

  render() {
    return (
      <div className="Dialog">
         <span className="close" onClick={this.props.closed}>&times;</span>
      </div>
    );
  }
}

the problem lies in the fact that opendialog is working,but closeDialog doesn't work.I was trying to pass closeDialog as props but it didn't work. Is there any other way to do it or can someone suggest an improvement in this code?

Answer 1

Lets try a different approach

Dialog component file

since you need multiple dialogs. we need identifiers to uniquely identify the dialogs, thats why i will use data attributes.

 export default class Dialogbox extends Component {
  render() {
    return (
      <div data-id={this.props.id} className="Dialog">
         <span data-id={this.props.id} className="close" onClick={this.props.closed}>&times;</span>
      </div>
    );
  }
}

Icon Component file

you are using document.getElementById . so it must have a unique identifier id. otherwise it will not work. thats why we will pass props id to uniquesly identify each dialog.

export default class Icon extends Component {
    constructor(props){
       super(props)
       this.look=this.look.bind(this);
       this.show=this.show.bind(this);
       this.close=this.close.bind(this);
       this.state = {open: false};
    }
    show(ev){
     const id=ev.target.dataset.id;
     document.getElementById(id).style.display='block';
     this.setState({open: true});
    }
    close(ev){
     const id=ev.target.dataset.id;
     document.getElementById(id).style.display='none';
     this.setState({open: false});
    }
    look (imgdes, i) {
        return (
                <div key={i} data-id={i} onClick={this.show}>
                    <Dialog closed={this.close} id={i}/>
                </div>
            );
        }

    render () {
        return (
                <div className="pro" >
                    {this.state.img.map(this.look)}
                </div>
        );
    }
};