I'm trying to simply create an offset window/modal/popup that on click opens and on cliking the close button closes. So far I achieved the open button to work, so the modal opens as espected. When the offset window is open, the close button doesn't work.
What am I missing? sorry I'm new with react, so I'm happy to hear also if my code needs adjustments or improvements. As I think it could be really positive for me.
Please view the code with all components. Demo here: https://codesandbox.io/s/sleepy-haslett-metr46
class CTAClose extends Component {
render () {
return (
<div className="contact__close-register">
<button type="button" className={`cta__close-register ${this.props.active}`} onClick={this.props.onClick} >
<AiOutlineClose/>
</button>
</div>
)
}
}
export default CTAClose
The active state is maintained in the Intro component. So when pressing the close button you need to correctly trigger the passed onClose handler. What you did was to have a separate active state within the Contact Component. When changing that state nothing happens since the modal opened state depends on the active from Intro component.
Checkout the working fiddle:
Correctly call onClose in Contact.jsx when pressing close button (Contact.jsx line 10)
<CTAClose onClick={this.props.onClose} />
Set the modal as closed in the Intro.jsx when onClose() is called (Intro.jsx line 30)
<Contact
active={this.state.active}
onClose={() => this.setState({ active: "" })}
/>