如何在 onClick 事件处理程序上渲染组件

Question

I am trying to open a Popper element when a user clicks a button (using onClick) and render the Popper component, since i'm using this function call in a array list of items. I want to execute the element after the button is triggered.

onClick Handler

const onAddToPlaylistClick = (evt, ytid) => {
  evt.stopPropagation();
  evt.preventDefault();

  console.log('here');
  const element = evt.currentTarget;
  console.log(element);   
  return (
    <ShowAddToPlaylistTooltip
      ytid={ytid}
      element={element}
      playlistState={playlistState}
      userState={userState}
      key={ToolTipKeys.AddToPlaylistToolTip}
    />
  );
};

Button Component

const onAddToPlaylistClick = (evt) => {
  props.onAddToPlaylistClick(evt, props.ytid);
};

<IconButton className={classes.iconButton} onClick={onAddToPlaylistClick}>
  <PlaylistAddIcon className={classes.icon} />
</IconButton>

Popper Element

const ShowAddToPlaylist = (props) => {
  const { ytid, userState, playlistState, element } = props;

  console.log('ShowAddToPlaylist...');

  const open = Boolean(element);

  const uid = userState.profile.uid;
  const userPlaylists = playlistState.playlistsByUser[uid] || [];

  const playlistList = userPlaylists.map((pid) => ({
    name: (playlistState.playlists[pid] ?? {}).name,
    pid: pid,
  }));

  const hasPlaylists = playlistList.length > 0;

  return (
    <Tooltip
      id={props.id}
      open={props.open}
      title="Add to playlist"
      anchorRef={element}
    >
      <AddPlaylistToolTip
        ytid={ytid}
        playlistList={playlistList}
      />
    </Tooltip>
  );
};

but onAddToPlaylistClick doesn't trigger React Element, what is it that i'm doing wrong?

Answer 1

You can't render JSX from onAddToPlaylistClick function, but you can implement some logic that will render popover (or if you use some Router so redirect...)

const onAddToPlaylistClick = (evt, ytid) => {
  evt.stopPropagation();
  evt.preventDefault();
  console.log('here');
  const element = evt.currentTarget;
  console.log(element);  
  this.setState({ element }) 
};

/// inside render (or `return` for function component...)

{ this.state.element && <ShowAddToPlaylistTooltip
      ytid={ytid}
      element={this.state.element}
      playlistState={playlistState}
      userState={userState}
      key={ToolTipKeys.AddToPlaylistToolTip}
    /> 
}

if element state initially is null , the popover gonna render only after click. for closing it use setState({ element: null })