reactjs - How can I call another function inside of arrow function in JSX?

Question

I have a component that uses a callback function, and when it's executed I have it render a video tag. But I also want to use ipcRenderer.send right after the video tag, but don't know how to write it properly to make it happen.

        <div className="main-user-video">
          {/* TODO: Use WebRTC.onCallUserAdded to add another and add another video with the new remoteStream */}
              <video
                id="video_player"
                className="main-user-video"
                // style={
                //   this.state.knocking.callAccepted
                //     ? null
                //     : { filter: "grayscale(100%)" }
                // }
                controls={false}
                ref={this.remoteVideo}
                autoPlay={true}
              ></video>
                {WebRTC.onCallUserAdded((err, callId, userId, audio, video, remoteStream, usersInCall) =>
                  <video
                  id="video_player"
                  className="main-user-video"
                  controls={false}
                  ref={remoteStream}
                  autoPlay={true}
                ></video>
                {(usersInCall > 2) ? electron.ipcRenderer.send("MULTI-PARTY-CALL") : null}
                )}
        </div>

Right after that second video tag is where I want to use ipcRenderer.

Answer 1

arrow functions are shorthand for a function that returns values.

() => <video/>

equals

() => {
  return <video/>
}

You can do whatever you want in the block before return

() => {
  // call function or any process
  return <video/>
}