重用不同状态的组件如何反应

Question

I'm creating a list that shows diferents rows with different inputs. The diferents inputs are conditioned to the selected, but my problem is that they change in all rows... and I do not know how to do it well.

An example:

I have a parent element (orange) and depending on the selected in the first select element, the child change (blue).

Parent and child element screenshot

But the problem is that when I select one option, all the children of the diferent rows changes (blue).

The problem screenshot

Here, the parent component code:

class FilterByDateCondition extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dateTypeCondition: "calendar",
        };
    }

    componentDidMount() {
        $('.date-condition-select').select2({
            width: '100%',
                minimumResultsForSearch: Infinity,
        })

        const s = this;
        $('.date-type-condition-select').select2({
            width: '100%',
            minimumResultsForSearch: Infinity,
        }).on("select2:select", function (e) {
            let state = s.state;
            state.dateTypeCondition = $(this).val();
            s.setState(state);
        });
    }

    _drawDateTypeCondition(dateTypeCondition) {
        if (dateTypeCondition == "calendar") {
            return <DateCalendar/>
        }
        else if (dateTypeCondition == "expression") {
            return <DateExpression/>
        }
    }

    render() {
        return (<div className="row">
                <div className="col-md-3">
                    <select className="date-type-condition-select">
                        <option value="calendar">{gettext("Calendar")}    </option>    
                        <option value="expression">{gettext("Expression")}</option>
                    </select>
                </div>
                <div className="col-md-2">
                    <select className="date-condition-select">
                        <option value="<">{"<"}</option>
                        <option value=">">{">"}</option>
                        <option value="==">{"=="}</option>
                    </select>
                </div>
                <div className="col-md-7">
                    {this._drawDateTypeCondition(this.state.dateTypeCondition)}
                </div>
            </div>
        );
    }
}

The chidren component are shown in the function _drawDateTypeCondition

How to reuse the components??

Thank you very much!!! : ]

Answer 1

I think this has to do with the class you are using. The select tags in both the parent components have the same class and since you are using class selector for trigering an action in you componentDidMount function, it doesn't matter which select is selected as long as it has that class.

I think a better way about this would be using a different identifier or adding a onClick or onSelect event to the select tags which trigger a seperately defined member function.

I hope this makes sense.