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.
Sorry guys. I should've researched more before jumping here to ask a question. Turns out the styled component of <EditBtn>
which had been developed by someone else was missing {...props}. It hence wasn't passing the onClick prop to the click listener. Thanks for your replies.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.