React on function click passed as props with HOC its getting executed multiple times

Question

having an issue with the on click the function it generates iterative multiple times, like one-click one time, two-click two times, three-click three times. and so on... What am I doing wrong here? below is the way I have implemented the structure and logic

Answer 1

From what I see you don't really know how react works, but here's dummy example:

constructor(props) {
    super(props);
    this.handleChatItemClicked = this.handleChatItemClicked.bind(this);
}

handleChatItemClicked = (payload) => {
    this.setState({
        sender_to_receiver_details: payload,
        is_member_selected: true
    });
    socket.emit("room_leave", {
        room_id: this.props.socket_details.room_id,
    })
    socket.emit("get_user_room", payload);
};

componentDidMount() {
    socket.on("get_user_room", (data) => {
        this.props.actions.savingRoomId(data)
    })
    socket.on("room_leave", () => {
        socket.emit("room_join", {
            room_id: this.props.socket_details.room_id,
        })
    })
socket.on("room_join", (data) => {
        })

}