3

I have a problem showing a list of buttons where each would display a popup. I have taken react-modal (https://github.com/reactjs/react-modal) component and able to display a single popup on button click, but how would i do it for list of buttons? I ve read about refs collection, but there is seem no way of changing props collection accessing and components by refs name?

Having a show button: 

<button type="button" onClick={this.openModal}>Show</button>

openModal function: 

 openModal: function(ref) {
   this.setState({isOpened: true});
 }

But how should i set a state value for particular button instance? i can make by giving each isOpened state value particular name: isOpened-1, isOpened-2 and so on, but i guess its not a proper way. Im just learning ReactJS.

ArkadyB
  • 1,265
  • 1
  • 19
  • 37
  • What is the case? Do you have a single popup for different buttons and you need to display it with different body or you have several popups? – elmeister Oct 01 '16 at 10:43
  • @elmeister, case is quite simple - each popup would have a form with unique hidden object value, read from list (where Show button resides). Would it be a show function, it would be somehtin like Show(id) – ArkadyB Oct 01 '16 at 10:49
  • if you plan to make several popups, several variables in state are required to serve open state for each of them. Why do you want to use refs for this case? Why not to pass just corresponding popup variable to set it to `true` in `openModal`? – elmeister Oct 01 '16 at 11:26
  • U mean, openModal(id){this.setState({id:true})? In this case it means ihave to place N tags representing popup - per each button. Isnot there some way to have just one replacing needed Id? – ArkadyB Oct 01 '16 at 11:30
  • 1
    Well, if you would like to have single popup, you can pass flag to open it into openModal function - with another variable, describing what do you plan to show inside modal body. I.e. `openModal(id, type)` - where `type` will be one of 'confirm', 'alert' or whatever. Then, you will `setState` with this type and use `{this.state.type === popupTypes.alert && ...` inside popup form. – elmeister Oct 01 '16 at 11:43
  • Check this [answer](http://stackoverflow.com/a/39802811/243900), basically what @elmeister said, you would have some way to tell your `open` method which popup/modal to open. – Diego Zacarias Oct 01 '16 at 16:20

2 Answers2

1

If I understand what you want, you can try something like this : 

constructor(props){
   super(props);
   this.state = {
      modals: {}
   }
}


handleModal(name, event){
    let modals = this.state.modals;

    if(this.state.modals.some(i => i.name === name)){
         let value = this.state.models.filter(f => f.name == name).map(i => i.active)[0];
         modals = [...modals, {name: name, open: !value}];
    }else{
         modals = [...modals, {name: name, open: true}];
    }

    this.setState({modals: modals})
}

And then 

<button type="button" onClick={this.openModal.bind(this, "modal1")}>Show</button>
Boky
  • 11,554
  • 28
  • 93
  • 163
0

I had exactly the same issue in project I'm working on. I've gave up to find the appropriate solution and finally came up with https://github.com/fckt/react-layer-stack . One of the main features - it creates holds the closure context (the "use" and "id" properties is for) for every Layer (could be Modal or anything else).

Contact me if you'll need help with.

fckt
  • 571
  • 4
  • 12