How to change Modal state from outside the React class?

Question

I am trying to call my modal by changing the state from outside the react class. But so far no luck. I tried the following:

I have a method named Portfolio which needs to activate the modal once user click on the Image

const Portfolio = (props) => 
<div className="col-sm-4">
    <div className="mb-2">
        <img 
        onClick={this.toggle} 
        className="card-img-top" 
        src={"/assets/imgs/project/"+props.portfolio.img_thumb} 
        alt="" />
    </div>
</div>

Here is the Class that contain the state and the modal. But I cannot change state to activate the modal.

class Project extends React.Component
{
    constructor(props, context) {
        super(props, context);
        this.state = {
            modal: false,
        }

        this.toggle = this.toggle.bind(this);
    }

    toggle() {
      this.setState({
        modal: !this.state.modal
      });
    }

    render(){
    return (
        <div className="row portfolioWrap">

       // here resides our modal which activate once modal state changed
        <div>
        <Modal 
         isOpen={this.state.modal} 
         toggle={this.toggle} 
         className={this.props.className}>
            <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
            <ModalBody>
            {this.state.gallery.map(gallery =>
              <img 
              className="card-img-top" 
              src={"/assets/imgs/project/"+gallery} alt="" />)
            }
            </ModalBody>
            <ModalFooter></ModalFooter>
        </Modal>
        </div>

    // calling portfolio method inside the loop
    {currentTodos.map(item => <Portfolio key={item.title} portfolio={item} />)}     




        </div>
    )
   }
}

I am trying to activate the modal from Portfolio function. But since its outside the class scope i cannot access the state. Is there any way to accomplish this?

Answer 1

You can pass the toggle method to your Portfolio component then use it from the props.

<Portfolio key={item.title} toggle={this.toggle} portfolio={item} />

Then in Portfolio:

const Portfolio = (props) => 
<div className="col-sm-4">
    <div className="mb-2">
        <img 
        onClick={props.toggle} 
        className="card-img-top" 
        src={"/assets/imgs/project/"+props.portfolio.img_thumb} 
        alt="" />
    </div>
</div>