ReactJS：在渲染中重用 div 元素 function

Question

Updated My Question based on comments. Not able to make small snippets as its a legacy code with lot of interacting components and I am very new to React to understand all the components.

I have the following GUI:

If you see carefully I have multiple fields with corresponding dropdowns. This combination is represented within a Div in my code under a class within render() function.

The problem is the Div code is repeatedly copy-paste to create a new field and dropdowns. I don't want to repeat the whole div again and again and want to replace it with some variable or function which accepts Field name and DROP_DOWN_TYPE.

I have tried many solutions but it resulted in various errors due to onchange event.

Repeated div is shown below:

<div className="infoBlock">
    <div className="row align-items-center">
        <div className="col-6">
            <div className="row">
                <div className="col-4">
                    <label className="b_label">Category :</label>
                </div>
                <div className="col-8">
                    <Dropdown type="Categories" isMultiple={true} onchange={this.handleDDClick} />
                </div>
            </div>
        </div>
        <div className="col-6">

        </div>
    </div>
</div>

I can't show DropDown code because its a huge file. But its a normal drop down which makes a service call to populate its fields.

Answer 1

Can you give more clarity by making a demo kind of thing on codesandbox.io?

What I feel is you are repeatedly calling the setState function according to the error.

Answer 2

Either your state is being called repeatedly somewhere, or you need to bind that this.handleDDClick onto that onchange in Dropdown tag. Sometimes it gets triggered without actually any change happening in the dropdown.