How to reuse my logic as a function in react js?

December 19, 2022

I have a logic on input focus & i’m passing few values with logic now i want to reuse this logic in too many input focus how can i do that?

My Logic Code:-

<input
    type="text"
    onFocus={(e) =>
        data?
            move_box_click(
                data.One.name.split(",")[0] * docWidth,
                data.One.name.split(",")[1] * docHeight,
                data.One.name.split(",")[3] * docHeight - data.One.name.split(",")[1] * docHeight + 2,
                data.One.name.split(",")[2] * docWidth - data.One.name.split(",")[0] * docWidth + 2,
                e
            ) : ""
    }
/>

<input
    type="text"
    onFocus={(e) =>
        data?
            move_box_click(
                data.Two.name.split(",")[0] * docWidth,
                data.Two.name.split(",")[1] * docHeight,
                data.Two.name.split(",")[3] * docHeight - data.Two.name.split(",")[1] * docHeight + 2,
                data.Two.name.split(",")[2] * docWidth - data.Two.name.split(",")[0] * docWidth + 2,
                e
            ) : ""
    }
/>

Thanks for your efforts!

>Solution :

You can create a function and pass the reference to the onFocus attribute, like this:

const myFocusHandler = (e, name) =>
data?
move_box_click(
name.split(",")[0] * docWidth,
name.split(",")[1] * docHeight,
name.split(",")[3] * docHeight - name.split(",")[1] * docHeight + 2,
name.split(",")[2] * docWidth - name.split(",")[0] * docWidth + 2,
e
) : ""

<input type="text" onFocus={(e) => myFocusHandler(e, data.One.name)} />
<input type="text" onFocus={(e) => myFocusHandler(e, data.Two.name)} />