Not able to open react-bootstrap modal from child component using react hooks to setState

I’m trying to trigger my react-bootstrap modal which is in the parent component from a button inside the child component. To achieve this, I am passing the handleShow function into the child component as props but this doesn’t seem to be working. The modal doesn’t open up on clicking the button and there are no errors on the browser console.

Parent Component:

OnboardPage.jsx

import React from 'react'
import { Row, Form } from 'react-bootstrap'

import { PersonalDetails } from './personalDetails'
import { EmailVerification } from './emailVerification'
import { OnboardForm } from './form'
import { FAQs } from './faq'
import { LeftCol, RightCol, FormContainer } from './styles'
import './styles.css'
import { Modal, Button } from 'react-bootstrap'

const OnboardPage = props => {
    const [show, setShow] = React.useState(false);
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true); 

    return (
        <Row>
            <LeftCol md={8}>
                <PersonalDetails parentShowFn={handleShow}/>
                <OnboardForm />
            </LeftCol>
            <RightCol md={4}>
                <EmailVerification />
                <FAQs />
            </RightCol>
            <Modal show={show} onHide={handleClose} className="editModal">
                <FormContainer>
                    <Modal.Header className="editModalHeader">
                      <Modal.Title>Edit Personal Details</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                   
                        <Form>
                          <Form.Group controlId="formBasicName">
                            <Form.Control type="text" placeholder="Name" className="formInput"/>
                          </Form.Group>

                          <Form.Group controlId="formBasicEmail">
                            <Form.Control type="email" placeholder="Email ID" className="formInput"/>
                          </Form.Group>

                          <Form.Group controlId="formBasicPhoneNumber">
                            <Form.Control type="text" placeholder="Phone Number" className="formInput"/>
                          </Form.Group>
                          <Form.Group controlId="formBasicName">
                            <Form.Control type="text" placeholder="Country you will work in" className="formInput"/>
                          </Form.Group>
                          <Button variant="primary" type="submit" className="submitBtn">
                            Save details
                          </Button>
                        </Form>
                    
                </Modal.Body>
                </FormContainer>
            </Modal>
        </Row>
    )
}

export default OnboardPage

Child Component:

PersonalDetails.jsx

import React from 'react'

import { colors } from '../../../../res'
import { TitleText, CommonText, SubHeadingText } from '../../../commons/freelancer/texts'
import { Container, TitleRow, DetailsRow, DetailsItem, EditBtn } from './personalDetailsStyles'
import { Modal, Button } from 'react-bootstrap'
// import EditDetailsModal from './EditDetailsModal'

const PersonalDetails = ({parentShowFn}) => {

    return (

        <Container>
        <TitleRow>
            <TitleText>Personal Details</TitleText>
            <EditBtn onClick={() => parentShowFn()}>Edit</EditBtn>
        </TitleRow>
    </Container>
    )

}
    
export default PersonalDetails

Can’t seem to trace why this isn’t working.

Answer

Turns out the styled component of <EditBtn> was missing {…props}. It hence wasn’t passing the onClick prop to the click listener. Thanks for your replies.

Advertisement

Answer