React: multiple modal and passing props dynamically

Question

I have a list of items (ProjectActivityList), for each item there is the Edit button. Clicking on it opens modal to edit the item. The modal accepts an ID.

var ProjectActivities = React.createClass({

    onEditItem: function(id){
        // I want to pass the ID to modal and open it
    },

    render: function(){
        return (
           <div>
               <ProjectActivityList items={this.state.activities} onEdit={this.onEditItem}/>
               <Modal />
           </div>
        )    
    }    
});

How I can open the modal passing to it the ID (in onEditItem)?

this.setState({ currentId: id }) ?

azium
– azium

2016-08-07 17:01:15 +00:00
Commented Aug 7, 2016 at 17:01 — azium
– azium, Commented Aug 7, 2016 at 17:01

Rushy Panchal · Accepted Answer · 2016-08-07 17:05:46Z

2

You want to pass it as a prop and set the state of the current element. By setting the state, a re-render will be performed (if necessary, which it is in this case) and so the Modal will receive the new id.

var ProjectActivities = React.createClass({

    onEditItem: function(id){
        // I want to pass the ID to modal and open it
        this.setState({editingId: id});
    },

    render: function(){
        return (
           <div>
               <ProjectActivityList items={this.state.activities} onEdit={this.onEditItem}/>
               <Modal id={this.state.editingId} />
           </div>
        )    
    }    
});

answered Aug 7, 2016 at 17:05

Rushy Panchal

17.7k16 gold badges66 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React: multiple modal and passing props dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related