A react button cannot have two arrow functions?

Question

I'm trying to make a button that displays a bootstrap modal with a form and fill it with the data of the element you clicked (The app let you list, add, delete and edit elements). The problem is that only the second arrow function in the onclick event works. I have tried putting them in just one function but I still can't figure it out. So here is the code, I'm still a beginner in react so I hope you can help me with this.

editButton(celldata) {

        const [show, setShow] = useState(false);

        const handleClose = () => setShow(false);
        const handleShow = () => setShow(true);

        return (
            <>
            <button
                type="button"
                onClick={() => this.setState({ cellName: celldata.celldata.cell, case: celldata.celldata.case, comments: celldata.celldata.comments }), handleShow}
                className="btn btn-outline-dark">
                    <Edit/>
            </button>
            {console.log(this.state.case, show)}
            <Modal show={show} onHide={handleClose}>
                <Modal.Header closeButton>
                <Modal.Title>Edit Cell</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form>
                        <Form.Group>
                            <Form.Label>Cell</Form.Label>
                            <Form.Control value={this.state.cellName} onChange={(e) => this.cellNameHandler(e)} style={{textAlign: 'left'}} placeholder="Cell Name" />
                        </Form.Group>
                        <Form.Group>
                            <Form.Label>Use Case</Form.Label>
                            <Form.Control value={this.state.case} onChange={(e) => this.caseHandler(e)} as="select">
                                {
                                    use_cases.use_cases.map((u) =>
                                        <option>
                                            {u}
                                        </option>
                                    )
                                }
                            </Form.Control>
                        </Form.Group>
                        <Form.Group>
                            <Form.Label>Comments</Form.Label>
                            <Form.Control value={this.state.comments} onChange={(e) => this.commentsHandler(e)} style={{textAlign: 'left'}} as="textarea" rows="3" />
                        </Form.Group>
                        <Button variant="secondary" onClick={handleClose}>
                            Cancel
                        </Button>
                        <Button variant="primary" onClick={() => { this.handleSave() }}>
                            Add
                        </Button>
                    </Form>
                </Modal.Body>
            </Modal>
            </>
        )
    }

Answer 1

You should not use state in functional component, use hooks instead, then compose two functions

function editButton(celldata) {
  const [show, setShow] = useState(false);
  const [selectedData, setSelectedData] = useState({});

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  const handleSelect = () => {
    setSelectedData({
      cellName: celldata.celldata.cell,
      case: celldata.celldata.case,
      comments: celldata.celldata.comments
    });
  };
  const handleButtonClick = () => {
    handleSelect();
    handleShow();
  };
  return (
    <>
      <button
        type="button"
        onClick={handleButtonClickhandleButtonClick}
        className="btn btn-outline-dark"
      >
        <Edit />
      </button>
      {console.log(selectedData.case, show)}
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Edit Cell</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Form>
            <Form.Group>
              <Form.Label>Cell</Form.Label>
              <Form.Control
                value={selectedData.cellName}
                onChange={e => this.cellNameHandler(e)}
                style={{ textAlign: 'left' }}
                placeholder="Cell Name"
              />
            </Form.Group>
            <Form.Group>
              <Form.Label>Use Case</Form.Label>
              <Form.Control
                value={selectedData.case}
                onChange={e => this.caseHandler(e)}
                as="select"
              >
                {use_cases.use_cases.map(u => (
                  <option>{u}</option>
                ))}
              </Form.Control>
            </Form.Group>
            <Form.Group>
              <Form.Label>Comments</Form.Label>
              <Form.Control
                value={selectedData.comments}
                onChange={e => this.commentsHandler(e)}
                style={{ textAlign: 'left' }}
                as="textarea"
                rows="3"
              />
            </Form.Group>
            <Button variant="secondary" onClick={handleClose}>
              Cancel
            </Button>
            <Button
              variant="primary"
              onClick={() => {
                this.handleSave();
              }}
            >
              Add
            </Button>
          </Form>
        </Modal.Body>
      </Modal>
    </>
  );
}