I had a problem looking my code react. The html part is very confuse, I always had so many parameters in each function, long lines, ugly code.

const itens = [...]

const send = (item, myUser) => {...}
const change = (myUser) => {...}
const del= (chatRoom) => {...}

return(
<div>
  {
  itens.map((item)=>
    <div>
      <h5>Head</h5>
      <div>{item.title}</div>
      <div onClick={() => send(item, myUser)}>Send</div>
      <div onClick={() => change(myUser)}>Change User</div>
      <div onClick={() => del(props.chatRoom)}>Delete</div>
    </div>
    )
  }
</div>
)

I create 3 examples of functions in html. Look, each must have parameters, but the parameters could be abstracted.

const itens = [...]

const send = (item, myUser) => {...}
const change = (myUser) => {...}
const del = (chatRoom) => {...}

const eventSend = (item) => { send(item, myUser) }
const eventChange = () => { change(myUser) }
const eventDel = () => { del(props.chatRoom) }

return(
<div>
  {
  itens.map((item)=>
    <div>
      <h5>Head</h5>
      <div>{item.title}</div>
      <div onClick={() => eventSend(item)}>Send</div>
      <div onClick={eventChange}>Change User</div>
      <div onClick={eventDel}>Delete</div>
    </div>
    )
  }
</div>
)

Look this html functions, more beautiful, more simple to read.

This case the functions 'event' can only be used in html, and are impure functions. your goal is, others functions do not need to receive the values unnecessary by argument. The event functions use state, props, global const, without needing parameters.

And why don't we make the functions use state without parameters? Because we are organized people and we know that our functions must be pure, to be easy testing and for manutention.

Github Code