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>
            </>
        )
    }

You're using `this.setState` in a functional component? That's for class components. The only way to have states in functional components is via hooks — Jayce444, Jan 09 '20 at 08:51

score 1 · Accepted Answer · answered Jan 09 '20 at 09:15

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>
    </>
  );
}

This works for me, now the data displays properly in the form but I can't modify any of the fields, may I need another function like handleselect for the onchange event? — ODLana, Jan 09 '20 at 09:37

A react button cannot have two arrow functions?

1 Answers1