0
import React, { useState, Component } from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter, Row, Col, CardHeader, CardBody, Card, } from 'reactstrap';

const ModalBuySell = (props) => {
  const {
    buttonLabel,
    className
  } = props;
  const datas = props;

  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);
  return (
    <div>
      <Button color="danger" onClick={toggle}>Buy / Sell</Button>
      <Modal isOpen={modal} toggle={toggle} className={className}>
        <ModalHeader toggle={toggle}>{datas.name} (No. ID {datas.id}) Transaction(s)</ModalHeader>
          <ModalBody>
            <Row>
              <Col>
                <b>In-hand Quantity</b>
              </Col>
              <Col xs="1">
                <i className="fa fa-arrow-right"></i>
              </Col>
              <Col>
                {datas.inHand}
              </Col>
            </Row>
          </ModalBody>
        <ModalFooter>
          <Button color="secondary" onClick={toggle}>Cancel</Button>
        </ModalFooter>
      </Modal>
    </div>
  );
}

export default ModalBuySell;

I tried to give my button some onChange function but first i need to make this to class, i'm beginner so i just search on the internet but all the solutions makes me use class instead of my code like that.

samuel njoo
  • 11
  • 3
  • 1
    I don't understand what you're trying to achieve. What do you mean by "give my button some onChange function"? – technophyle Feb 03 '20 at 03:06
  • 3
    Anything that can be done with a class component can be accomplished with a functional one (what you currently have). Your issue would be the implementation of your event handler – Andrew Feb 03 '20 at 03:15
  • hmm.. i'm trying to make my code into class so i can use function in it – samuel njoo Feb 03 '20 at 03:49
  • 1
    You can just define a function at the top of your functional component. In fact, you already have one - const toggle is a function which calls setModal. – Frank Egan Feb 03 '20 at 03:54
  • Do you mean lifecycle methods? You can implement the same thing in a functional component with React Hooks. Take a look at this: https://stackoverflow.com/questions/53214465/how-to-use-lifecycle-methods-with-hooks-in-react – Andus Feb 03 '20 at 06:03

0 Answers0