-1

I'm using SkyLight react component to make modal dialog. The problem that I'm trying to solve is how to show different content in modal dialog using only one button.

<a className="btn btn-secondary" onClick={() => {
   this.setState({
     features: plan.features
       })
      this.dialog.show()
   }}>Features</a>

The content that I want to show is Array.

For example: features:["Feature 1", "Feature 2"]

I'm keeping that features in state an show them on click using map looping.

<SkyLight hideOnOverlayClicked ref={ref => this.dialog = ref} title="Hi, I'm a simple modal">
  {
   this.state.features.map((feature)=>{
     <h4>{feature}</h4>
    })

      }
  </SkyLight>

When I click that button I have this error: Cannot read property 'show' of undefined

Any ideas how to solve this?\

Thanks

Devmasta
  • 513
  • 2
  • 14
  • 38

1 Answers1

1

The most probably is that you are missing the ref Creation on your constructor.

class ParentComponentForModal extends Component{
    constructor(){
         // rest of your constructor.
         this.dialog = React.createRef();
    }
    //....rest of your code
}

and then change your component to have ref={this.dialog} instead of ref={ref => this.dialog = ref}

<SkyLight hideOnOverlayClicked ref={this.dialog} .....

adding a working sample on codesandbox

Prince Hernandez
  • 3,623
  • 1
  • 10
  • 19