react-popover with multiple targets

FullNormalTable.jsx

import React, { Component, PropTypes } from 'react';
import Popover from 'react-popover';

// Components
import { EditQuantity } from '../dropdowns';

export class FullNormalTable extends Component {
    static contextTypes = {
        store: PropTypes.object.isRequired
    };

    constructor (props, context) {
        super(props, context);

        this.state = {
            dropdown: false,
            target: null,
            item: null,
            index: null
        };
    }

    renderDropdown () {
        return (
            <EditQuantity
                item={this.state.item}
                index={this.state.index}
                store={this.context.store}
                onClose={::this.onCloseDropdown} />);
    }

    onCloseDropdown () {
        this.setState({
            dropdown: false,
            target: null
        });
    }

    editQuantity (item, index, {target}) {
        item.Ei = this.props.catalog[item.EdinitsaIzmereniyaId];
        this.setState({
            target,
            item,
            index,
            dropdown: true
        });
    }

    render () {
        const { Nomenklatura, catalog, removeItem } = this.props;
        return (
            <div>
                <table className="table-cancel">
                    <thead className="table-cancel__head">
                    <tr>
                        <th className="table-cancel__th">Наименование</th>
                        <th className="table-cancel__th">Отпускная цена за ед.</th>
                        <th className="table-cancel__th">Количество</th>
                        <th className="table-cancel__th">Сумма</th>
                        <th className="table-cancel__th"></th>
                    </tr>
                    </thead>
                    <tbody>
                        {Nomenklatura.map((item, i) => (
                            <tr className="table-cancel__tr" key={i}>
                                <td className="table-cancel__td">{item.Title}</td>
                                <td className="table-cancel__td">
                                    {item.PriceForUnit/* | bolCurrency*/}
                                </td>
                                <td className="table-cancel__td">
                                    <span
                                        className="link_down link_secondary"
                                        onClick={this.editQuantity.bind(this, item, i)}
                                        data-qa="Nomenklatura.Item.Edit">
                                        {item.Qty}&nbsp;{catalog[item.EdinitsaIzmereniyaId]}
                                    </span>
                                </td>
                                <td className="table-cancel__td">
                                    {item.TotalPrice}
                                </td>
                                <td className="table-cancel__td">
                                    <span
                                        className="websymbol-close"
                                        onClick={removeItem.bind(this, i)}
                                        data-qa="Nomenklatura.Item.Delete">&#205;</span>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
                <Popover
                    isOpen={this.state.dropdown}
                    body={this.renderDropdown()}
                    targetElement={this.state.target}
                    onOuterAction={::this.onCloseDropdown}
                    tipSize={10} />
            </div>
        );
    }
};