How can I get value from react modal bootstrap?

Question

How can I get value from bootstrap modal? I'm using reacstrap https://github.com/reactstrap

Here is my page that call the modal

import { ButtonGroup, Button, Input, Row, Col } from 'reactstrap';
import RegisterLookup from '../lookup/RegisterLookup';

<RegisterLookup
  isOpen={this.state.register}
  toggle={this.toggleRegister}
  className={''}
/>

and here is my modal component:

  register() {
    console.log("da")
  }

render() {
    return (
      <div>
        <Modal isOpen={this.props.isOpen} toggle={this.props.toggle} className={this.props.className} size="lg">
          <ModalHeader toggle={this.props.toggle}>Register</ModalHeader>
          <ModalBody>
            <div className="row mb-2">
              <div className="col-sm-12">
                <Row>
                  <Col md="6" xs="12">
                    <FormGroup row>
                      <Label sm="4">Enter your name <span className="text-danger">*</span></Label>
                      <Col>
                        <Input />
                      </Col>
                    </FormGroup>
                  </Col>
                </Row>
              </div>
            </div>

          </ModalBody>
          <ModalFooter>
            <Button className="pull-right" type="button" color="primary" onClick={() => { this.register(); }}>
              <span className="hidden-xs-down">Register </span>
            </Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

RegisterLookup.defaultProps = {
  isOpen: PropTypes.bool,
  toggle: PropTypes.func,
  className: PropTypes.string,
};

RegisterLookup.propTypes = {
  isOpen: PropTypes.bool,
  toggle: PropTypes.func,
  className: PropTypes.string,
};

It show the modal :

but how can I get the value I enter in modal to my page that call the modal? Thanks in advance.

Answer 1

You can send the value back with a function you send as a prop from the parent to the modal.

Here's an example that I have simplified to highlight the changes you need to make. The Modal controls the state of the Input but when you hit the button the local reg() function is called, which in turn calls the register() function from the parent because it's being passed down as a prop called onRegister. We pass name as the argument to that function call.

Note that I've also added the nameChange() function which you didn't have. This function is called whenever the value of the Input is changed (e.g by a keypress) and updates the local state.

---

Parent:

register(name) {
  console.log(name);
}


render() {
  return(
    <RegisterLookup onRegister={this.register} />
  );
}

Modal:

nameChange = (e) => {
  this.setState({name: e.target.value});
}

reg = () => {
  this.props.onRegister(this.state.name);
}

render() {
  return(
    <Modal>
      Enter your name: <Input onChange={this.nameChange} />
      <Button onClick={this.reg}>Register</Button>
    </Modal>
  );
}