Bootstrap modals are populated with a same single value - Meteor+React

Question

Problem1: Solved

Problem2: ??

I am learning react+meteor+bootstrap and implementing a CRUD for a simple model named portfolio using them. I am stuck with the "U" in the "CRUD".

Following is the code.

ListPortfolios = React.createClass({
    mixins: [ReactMeteorData],
    getMeteorData(){
        return {
            portfolios: portfolios.find().fetch()
        };
    },
    renderPortfolios(){
        return this.data.portfolios.map((portfolio) => {
           return <PortfolioItem key={portfolio._id} portfolio={portfolio}></PortfolioItem>;
        });
    },
    render(){
        return(
            <div className="panel-group">
                <div className="panel panel-primary">
                    <div className="panel-heading">Portfolios</div>
                    <div className="panel-body" style={{height: 250}}>
                        <ul className="list-group" style={{overflowY: "scroll",maxHeight:230}}>
                            {this.renderPortfolios()}
                        </ul>
                    </div>
                </div>
            </div>
        );
    }
});

PortfolioItem = React.createClass({
    handleEditClick(event){
        console.log(event);
    },
    handleRemoveClick(event){
        event.preventDefault();
        Meteor.call("removePortfolio",this.props.portfolio._id);
    },
    render(){
        var editBtnStyle = {
            position: "absolute",
            right: 100,
            top: 10
        };
        var removeBtnStyle = {
            position: "absolute",
            right: 0,
            top: 10
        };

        return(
            <div>
                <li className="list-group-item" >
                    {this.props.portfolio.name}
                    <a  href=""
                        data-toggle="modal"
                        data-target="#myModal"
                        name="editBtn"
                        className="glyphicon glyphicon-pencil"
                        id={this.props.portfolio._id}
                        data-portfolio={this.props.portfolio}
                        style={editBtnStyle}
                        onClick={this.handleEditClick}>Edit
                    </a>
                    <a  href=""
                        name="removeBtn"
                        className="glyphicon glyphicon-remove"
                        id={this.props.portfolio._id}
                        style={removeBtnStyle}
                        onClick={this.handleRemoveClick}>Remove
                    </a>
                    <MyModal key={this.props.key} portfolio={this.props.portfolio}/>
                </li>
            </div>
        )
    }
});

MyModal = React.createClass({
    handleFormSubmit(event){
        console.log(event);
        event.preventDefault();
        var portfolioObjToSet = Session.get("Portfolio");
        //portfolioObjToSet.name = JSON.parse(event.target.dataset.portfolio).name.value;
        Meteor.call("updatePortfolio",this.props.portfolio._id,portfolioObjToSet);
    },
    render(){
        return(
            <div className="modal fade" id="myModal" role="dialog">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button" className="close" data-dismiss="modal">&times;</button>
                            <h4 className="modal-title">Modal Header</h4>
                        </div>
                            <div className="modal-body">
                                <form role="form" onSubmit={this.handleFormSubmit}>
                                <input name="newPortfolioName" type="text" defaultValue={this.props.portfolio.name}/>
                                <button type="submit" className="btn btn-default" data-dismiss="modal" value="Done"></button>
                                </form>
                            </div>
                            <div className="modal-footer">

                            </div>
                    </div>

                </div>

            </div>
        );
    }
});

So, As you see the above code contains three react components. A List Component, A ListItem Component, and A Modal component that contains a form to edit/update the tuple.

Now, I have two problems.

1) When I click on the "Edit" button of a particular list item, the modal opens, that's fine, but the populated value in the text box which is needed to be updated is always the value of the first item in the list no matter on which item's "edit button" I click on.

2) The form submit event of the form present in the modal is not triggered for some reason.

I have dug the entire code so many times, but somehow, I am unable to reach the cause of the issue.

SOLUTION Problem # 1: Only one modal was being created by the html for all the rows of the list since the id was fixed that was "MyModal". To fix, I created a modal for every list item separately of course with a different id. It worked.

Answer 1

SOLUTION Problem # 1: Only one modal was being created by the html for all the rows of the list since the id was fixed that was "MyModal". To fix, I created a modal for every list item separately of course with a different id. It worked.

Replaced

<div className="modal fade" id="myModal" role="dialog">

With

<div className="modal fade" id={this.props.itemNumber} role="dialog">

where itemN is a iterating variable