title: 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
body: <p>I'm calling a parent method from child component using props and I'm getting this error:
  <a href="https://i.stack.imgur.com/UVZIl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UVZIl.png" alt="enter image description here"></a></p>
  
  <p>The way I'm passing props to the AddGuest child component is like this:</p>
  
  <pre><code>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)=&gt;{
      console.log('saasa')
      this.setState({guestModalShow:a});
    }
      asd=(a)=&gt;{
      console.log(a) // works perfectly 
  
      }
  
      render(){
  
      return (
  
        &lt;Modal
          {...this.props}
          size="lg"
          aria-labelledby="contained-modal-title-vcenter"
          centered
        &gt;
          &lt;Modal.Header &gt;
          &lt;label &gt;Cancel&lt;/label&gt;
            &lt;Modal.Title id="contained-modal-title-vcenter"&gt;
              New Meeting
            &lt;/Modal.Title&gt;
            &lt;label&gt;Create&lt;/label&gt;
          &lt;/Modal.Header&gt;
          &lt;Modal.Body&gt;
            &lt;h4&gt;&lt;input type="text" className="form-control" placeholder="Meeting title"/&gt;&lt;/h4&gt;
            {/* &lt;DatePicker className="form-control"
          selected={startDate}
          onChange={setStartDate}
        /&gt; */}
        &lt;label variant="primary" onClick={()=&gt;this.as(true)}&gt;
              Add Guest 
            &lt;/label&gt;
  
          &lt;/Modal.Body&gt;
          &lt;Modal.Footer&gt;
            &lt;Button onClick={this.props.onHide}&gt;Close&lt;/Button&gt;
          &lt;/Modal.Footer&gt;
          &lt;AddGuest
          show={this.state.guestModalShow}
          savehere={(a)=&gt;this.asd(a)}
          onHide={() =&gt; this.as(false)}
  
        /&gt;
        &lt;/Modal&gt;      
      )
      }
    }
    export default CreateMeeting;
  </code></pre>
  
  <p>My child component is implemented as:</p>
  
  <pre><code>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 =&gt; {
          const name = event.target.name;
          const value = event.target.value;
  
          this.setState({
            formControls: {
              ...this.state.formControls,
              [name]:
                value
  
            }
          });
        }
        sendData = () =&gt; {
            console.log('hhhh--')
          this.props.savehere("Hey Popsie, How’s it going?");
     }
        render(){
        return (
        &lt;Modal  {...this.props} &gt;
          &lt;Modal.Header closeButton&gt;
            &lt;Modal.Title&gt;Add Guest&lt;/Modal.Title&gt;
          &lt;/Modal.Header&gt;
          &lt;Modal.Body&gt;
          &lt;h4&gt;&lt;input type="text" name="name" value={this.state.formControls.name}
                      onChange={this.changeHandler} required className="form-control" placeholder="Guest Name"/&gt;&lt;/h4&gt;
          &lt;h4&gt;&lt;input type="text" className="form-control" name="email" value={this.state.formControls.email}
                      onChange={this.changeHandler} required placeholder="Guest Email"/&gt;&lt;/h4&gt;
          &lt;/Modal.Body&gt;
          &lt;Modal.Footer&gt;
            &lt;Button variant="secondary" onClick={this.props.onHide}&gt;
              Close
            &lt;/Button&gt;
            &lt;Button variant="primary" onClick={()=&gt;this.sendData()}&gt;
              Save 
            &lt;/Button&gt;
          &lt;/Modal.Footer&gt;
        &lt;/Modal&gt;
        );
        }
      }
      export default AddGuest;
  </code></pre>
  
  <p>Im using react boostrap modals and calling another modal. What could be problem causing this error?</p>