# New to jsonforms. have a question about multiple custom renderes

**URL:** <https://jsonforms.discourse.group/t/new-to-jsonforms-have-a-question-about-multiple-custom-renderes/250>\
**Category:** General\
**Created:** [June 28, 2021, 3:00pm UTC](https://jsonforms.discourse.group/t/new-to-jsonforms-have-a-question-about-multiple-custom-renderes/250 "2021-06-28T15:00:40Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![discobot](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/discobot/32/3_2.png) [@discobot](https://jsonforms.discourse.group/u/discobot)\
**Post date:** [June 28, 2021, 3:00pm UTC](https://jsonforms.discourse.group/t/new-to-jsonforms-have-a-question-about-multiple-custom-renderes/250/1 "2021-06-28T15:00:40Z")

</div>

I have 2 different, but kinda of similar renderes

const renderers = [  
…materialRenderers,  
//register custom renderers  
{ tester: contactPickerManagementControlTester, renderer: ContactPickerManagementControl },  
{ tester: peoplePickerManagementControlTester, renderer: PeoplePickerManagementControl }

];

pretty much quite equal, but differs on properties on control and on tester.

The renderer goes into an eternal loop for one of the controls.

Got some tips on how to find out why? they are practically the same but differ on properties for the PeoplePicker control contact | user

export const ContactPickerManagement: React.FunctionComponent = ({ id, updateValue, label, defaultSelectedUserIds }) =\> {

```auto
console.log(id, "inside ContactPickerManagement");

const handleSelectionChanged = (e) => {
    updateValue(e.target.selectedPeople);
};

return (
    <div key={`${id}_ContactPicker-div`}>
        <p className={styles.labelForControl}>{label.replace(/([A-Z])/g, ' $1').trim()}</p>
        <PeoplePicker placeholder={'Start writing the persons name or email'} allowAnyEmail={true} type={PersonType.person} userType={UserType.user} defaultSelectedUserIds={defaultSelectedUserIds} selectionMode="multiple" key={`${id}_ContactPicker`} selectionChanged={handleSelectionChanged}></PeoplePicker>
    </div>
);

```

};

export const ContactPickerManagementControl: React.FunctionComponent = ({ data, handleChange, path, id}: ContactPickerManagementControlProps) =\> {  
const [defaultSelectedUserIds, SetDefaultSelectedUserIds] = useState\<string\>();

```auto
useEffect(() => {
    try {
        SetDefaultSelectedUserIds(data ? data.map(element => {
            return element.id;
        }) : []);

    } catch (error) {
        SetDefaultSelectedUserIds([]);
    }
}, []);

const handleChangeInControl = (pathToSchema: string, value: any) => {
    console.log(value);
    handleChange(pathToSchema, value);
};

return (
    <ContactPickerManagement
        defaultSelectedUserIds={defaultSelectedUserIds}
        label={path}
        id={id}
        // value={data}
        updateValue={(newValue: any) => handleChangeInControl(path, newValue)}
    />);

```

};

export default withJsonFormsControlProps(ContactPickerManagementControl);

export default rankWith(  
3, //increase rank as needed

// or(…contactTester)  
scopeEndsWith(‘CounterpartyResponsibleForDailyBusiness’)

);

_[[original thread](https://spectrum.chat/jsonforms/general/new-to-jsonforms-have-a-question-about-multiple-custom-renderes~ce52d9ca-50be-4bff-a765-8c27cf0f57ea) by Ole Bergtun]_