Webman Webman - 3 months ago 19
Javascript Question

React: multiple modal and passing props dinamically

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
)?

Answer

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>
        )    
    }    
});
Comments