После нажатия кнопки компонент должен отрендерить.

Question

После нажатия кнопки EditChannel компонент должен отобразиться. Прямо сейчас, если я до нажатия на кнопку EditChannel повторно рендеринг столько раз, сколько элемент списка. После нажатия тоже происходит то же самое. Я хочу только после нажатия на кнопку. Пожалуйста, найдите ниже строки для кода. После нажатия компонента EditChannel должен отображаться компонент карты канала

import React, { Fragment } from "react";
import { makeStyles } from "@material-ui/core/styles";
import { Typography, Button } from "@material-ui/core";
import Avatar from "@material-ui/core/Avatar";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { channelFollow, channelFetchById } from "../../../redux/action/channel";
import EditChannel from "../../Channels/List/Edit";


const ChannelCard = props => {
  const classes = useStyles();
  const { channel, channelFetchById } = props;
  const [open, setOpen] = React.useState(false);
  const handleClickOpen = () => {
    setOpen(true);
  };
  const view = (
    <div className={classes.card}>
      <Link to={`/channels/${channel._id}`} className={classes.link}>
        <div className={classes.root}>
          <Avatar
            alt="Remy Sharp"
            src={channel.avatar}
            className={classes.bigAvatar}
          />
        </div>

        <div className={classes.title}>
          <Typography
            variant="subtitle1"
            align="center"
            className={classes.text}
          >
            {channel.channelName}
          </Typography>
          <Typography variant="body2" align="center">
            {channel.introduction}
          </Typography>
        </div>
      </Link>
      <Typography variant="body2" align="center" className={classes.text1}>
        {channel.follows ? channel.follows.length : 0} followers <br />
        Language:{channel.language}
      </Typography>
      <div className={classes.center}>
        <div className={classes.button}>
          <div className={classes.buttons}>
            <Button
              variant="contained"
              color="primary"
              onClick={() => {
                channelFetchById(channel._id);
                handleClickOpen();
              }}
            >
              Edit
            </Button>
            {handleClickOpen ? (
              <EditChannel setOpen={setOpen} open={open} />
            ) : null}
          </div>
          <div>
            <Button color="primary" variant="contained">
              Delete
            </Button>
          </div>
        </div>

        <br />
      </div>
    </div>
  );
  return <Fragment>{view}</Fragment>;
};
export default connect(null, { channelFollow, channelFetchById })(ChannelCard);

Answer 1

Полагаю, что вместо handleClickOpen будет работать только open,

   {open ? (
     <EditChannel setOpen={setOpen} open={open} />
   ) : null}

Поскольку handleClickOpen - это событие click, а не логическая переменная