React: Invalid value for prop `savehere` on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM
Solution 1
The problem here is that a non-stardard input prop savehere
of your <AddGuest/>
component which is being directly spread into the <Modal/>
component when AddGuest
is rendered:
render(){
return (
<Modal {...this.props} > {/*<-- This is problematic, as all props
of AddGuest are spread into Modal
including those not supported by
Modal such as "savehere"*/}
...
</Modal>)
}
Rather than spread the props directly to Modal
, consider only applying the props that the Modal
component supports. A simple solution for your case would be to explictly specify the show
and onHide
props passed to AddGuest
:
render(){
return (
<Modal show={this.props.show} onHide={this.props.onHide}>
...
</Modal>)
}
Hope that helps!
Solution 2
I also met this problem and solved it with Object Destructuring
const {savehere, ...others} = props
return (
<Modal ...others/>
)
use variable savehere to store the callback function, and use variable other to store the propertys which will be passed to <Modal/>
Asad
I did graduation from University of engineering and technology,Lahore. I am full stack developer. currently I am working as front-end developer.
Updated on August 02, 2022Comments
-
Asad almost 2 years
I'm calling a parent method from child component using props and I'm getting this error:
The way I'm passing props to the AddGuest child component is like this:
import React from 'react'; import globalService from '../services/globalService'; import '../styles/chairqueue.css'; import {buttonText,endPoint} from '../constants/global.constants'; import Modal from 'react-bootstrap/Modal' import ModalDialog from 'react-bootstrap/ModalDialog' import ModalHeader from 'react-bootstrap/ModalHeader' import ModalTitle from 'react-bootstrap/ModalTitle' import ModalBody from 'react-bootstrap/ModalBody' import ModalFooter from 'react-bootstrap/ModalFooter' import Button from 'react-bootstrap/Button' import { useState, useEffect } from 'react'; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; import AddGuest from './addGuest' class CreateMeeting extends React.Component { constructor(props){ super(props) this.state={ guestModalShow:false } } as=(a)=>{ console.log('saasa') this.setState({guestModalShow:a}); } asd=(a)=>{ console.log(a) // works perfectly } render(){ return ( <Modal {...this.props} size="lg" aria-labelledby="contained-modal-title-vcenter" centered > <Modal.Header > <label >Cancel</label> <Modal.Title id="contained-modal-title-vcenter"> New Meeting </Modal.Title> <label>Create</label> </Modal.Header> <Modal.Body> <h4><input type="text" className="form-control" placeholder="Meeting title"/></h4> {/* <DatePicker className="form-control" selected={startDate} onChange={setStartDate} /> */} <label variant="primary" onClick={()=>this.as(true)}> Add Guest </label> </Modal.Body> <Modal.Footer> <Button onClick={this.props.onHide}>Close</Button> </Modal.Footer> <AddGuest show={this.state.guestModalShow} savehere={(a)=>this.asd(a)} onHide={() => this.as(false)} /> </Modal> ) } } export default CreateMeeting;
My child component is implemented as:
import React from 'react'; import '../styles/chairqueue.css'; import {buttonText,endPoint} from '../constants/global.constants'; import Modal from 'react-bootstrap/Modal' import ModalDialog from 'react-bootstrap/ModalDialog' import ModalHeader from 'react-bootstrap/ModalHeader' import ModalTitle from 'react-bootstrap/ModalTitle' import ModalBody from 'react-bootstrap/ModalBody' import ModalFooter from 'react-bootstrap/ModalFooter' import Button from 'react-bootstrap/Button' import { useState, useEffect } from 'react'; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; class AddGuest extends React.Component { constructor(props){ super(props) this.state={ startDate:new Date(), formControls: { email: '', name: '' }, } } changeHandler = event => { const name = event.target.name; const value = event.target.value; this.setState({ formControls: { ...this.state.formControls, [name]: value } }); } sendData = () => { console.log('hhhh--') this.props.savehere("Hey Popsie, How’s it going?"); } render(){ return ( <Modal {...this.props} > <Modal.Header closeButton> <Modal.Title>Add Guest</Modal.Title> </Modal.Header> <Modal.Body> <h4><input type="text" name="name" value={this.state.formControls.name} onChange={this.changeHandler} required className="form-control" placeholder="Guest Name"/></h4> <h4><input type="text" className="form-control" name="email" value={this.state.formControls.email} onChange={this.changeHandler} required placeholder="Guest Email"/></h4> </Modal.Body> <Modal.Footer> <Button variant="secondary" onClick={this.props.onHide}> Close </Button> <Button variant="primary" onClick={()=>this.sendData()}> Save </Button> </Modal.Footer> </Modal> ); } } export default AddGuest;
Im using react boostrap modals and calling another modal. What could be problem causing this error?