How to convey the status through the props? Tell me pliz.Modal opens, but does not close + I am sure that this is not so good

import React from "react"; import {MDBContainer, MDBRow, MDBCol, MDBMask, MDBBtn} from "mdbreact"; import Modal from "./Modal"; class Intro extends React.Component { constructor(props) { super(props); } state = { modal9: false }; toggle = nr => () => { let modalNumber = "modal" + nr; this.setState({ [modalNumber]: !this.state[modalNumber] }); }; render() { return ( <header className="d-flex justify-content-center align-items-center gradient header" id="main" > <MDBMask> <MDBContainer> <MDBRow> <div className="white-text text-center text-md-left col-md-6 mt-xl-5 mb-5"> <h1 className="h1-responsive font-weight-bold mt-sm-5"> ΠŸΠΎΡ‡Π΅ΠΌΡƒ ΠΌΡ‹? </h1> <hr className="hr-light"/> <h6 className="mb-4"> Высокий ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ спСциалистов. Π’Ρ€Π°Ρ‡ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ большой ΠΎΠΏΡ‹Ρ‚ практичСской Ρ€Π°Π±ΠΎΡ‚Ρ‹, систСматичСски проходят курсы ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ ΠΊΠ²Π°Π»ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΠΈ Π² ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Ρ†Π΅Π½Ρ‚Ρ€Π°Ρ… ΠΌΠΈΡ€Π°, ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°ΡŽΡ‚ участиС Π² ΠΌΠ΅ΠΆΠ΄ΡƒΠ½Π°Ρ€ΠΎΠ΄Π½Ρ‹Ρ… сСминарах ΠΈ конфСрСнциях. </h6> <MDBBtn color="white" onClick={this.toggle(9)}> ΠŸΠΎΠ»ΡƒΡ‡ΠΈ ΠΊΠΎΠ½ΡΡƒΠ»ΡŒΡ‚Π°Ρ†ΠΈΡŽ бСсплатно </MDBBtn> </div> <MDBCol md="6" xl="5" className="mt-xl-5"/> </MDBRow> </MDBContainer> </MDBMask> <Modal foo={this.state.modal9}/> </header> ); } } export default Intro; ΠΈ сам ΠΌΠΎΠ΄Π°Π» import { MDBBtn, MDBCol, MDBContainer, MDBIcon, MDBInput, MDBModal, MDBModalBody, MDBModalHeader, MDBRow } from "mdbreact"; import React from "react"; import axios from "axios"; export default class Modal extends React.Component { constructor(props) { super(props); this.state = { name: "", email: "", message: "" }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange = e => { this.setState({[e.target.name]: e.target.value}); }; async handleSubmit(e) { e.preventDefault(); const {name, email, message} = this.state; const form = await axios.post("/api/form", { name, email, message }); } render() { return ( <MDBModal isOpen={this.props.foo} centered> <MDBModalHeader toggle={this.props.foo}> ΠžΠΏΠΈΡˆΠΈΡ‚Π΅ Π²Π°ΡˆΡƒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ Π½ΠΈΠΆΠ΅: </MDBModalHeader> <MDBModalBody> <MDBContainer> <MDBRow> <MDBCol md="12"> <form onSubmit={this.handleSubmit}> <p className="h5 text-center mb-4"> ΠœΡ‹ всСгда Ρ€Π°Π΄Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ Π²Π°ΠΌ </p> <div className="grey-text"> <MDBInput className="senderName" label="Π’Π°ΡˆΠ΅ имя" name="name" icon="user" group type="text" validate error="wrong" success="right" onChange={this.handleChange} /> <MDBInput className="senderEmail" label="Π’Π°Ρˆ email" name="email" icon="envelope" group type="email" validate error="wrong" success="right" onChange={this.handleChange} /> <MDBInput className="senderSubject" label="Π’Π΅ΠΌΠ°" name="subject" icon="tag" group type="text" validate error="wrong" success="right" onChange={this.handleChange} /> <MDBInput className="senderMessage" type="textarea" name="message" rows="2" label="Π’Π°ΡˆΠ΅ сообщСниС" icon="pencil-alt" onChange={this.handleChange} /> </div> <div className="text-center"> <MDBBtn type="submit" outline color="secondary"> ΠžΡ‚ΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ{" "} <MDBIcon far icon="paper-plane" className="ml-1"/> </MDBBtn> </div> </form> </MDBCol> </MDBRow> </MDBContainer> </MDBModalBody> </MDBModal> ); } }

Opens but does not close

  • one
    You read the errors on the screen, where does the state? You do not pass a function in the props - ThisMan 2:53 pm

1 answer 1

The problem is the following component call:

 <MDBModalHeader toggle={this.props.foo}> ΠžΠΏΠΈΡˆΠΈΡ‚Π΅ Π²Π°ΡˆΡƒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ Π½ΠΈΠΆΠ΅: </MDBModalHeader>

You pass a boolean value to toggle , and you need to pass a function. To solve the problem, you can do the following:

1) Modify the call <Modal /> by adding onToggle to the onToggle ( onToggle pass the onToggle to it).

 <Modal foo={this.state.modal9} onToggle={this.toggle(9)} />

2) We will transfer the new props to <MDBModalHeader />

 <MDBModalHeader toggle={this.props.onToggle}> ΠžΠΏΠΈΡˆΠΈΡ‚Π΅ Π²Π°ΡˆΡƒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ Π½ΠΈΠΆΠ΅: </MDBModalHeader>

I hope this decision will help you! πŸ˜‰