const data = [{id: 1, name: 'any'}, {d: 2, name: 'some'}]
const MyComponent = () => <button>{'On'}</button>
suppose I need to send a toggle component to the data so I am passing it as
data.map((item) => {
reutrn {...item, toggle: <MyComponent />}
})
after this I am getting the updated data and able see the toggle component but this hangs the app because of multiple rendering which happens on onChange and the state is also updating at the same time
other way I have tried is to pass the component as function call itself
data.map((item) => {
reutrn {...item, toggle: MyComponent()}
})
but this also hangs on onChange of the input field as onChange is happening on other component that is sibling to its parent component