React: Modal containing form won't recognise a a prop of type function being passed down to it

Question

This is a very specific issue I have searched this site and the web for hours trying to resolve it. Mod please don't disable this post with out reading completely. I can pass function to control the state easily. I can pass objects arrays to modal easily

This issue is specifically passing a function to a modal which contains a registration form - upon completion of the form I want to change the state.

class Users extends Component {

  aPropVal = 'works fine';

  // passing the following function as prop to any other (non-modal) component works fine
  addUserStart = (data) => {
    console.log('addUserStart has been fired')
  }

  render() {
    return (
      <div id="main">
          <ModalAddUser  addUserStart={this.addUserStart} aprop={this.aPropVal} />
...
      </div>
    )
  }
}

export default Users

then the ModalAddUserObject which works perfectly in every way - exception being the function won't pass

import React, { useState } from 'react';
import { Button,  FormGroup, Input, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

    const ModalAddUser = (props) => {

        console.log('props for ModalAddUser: ' + JSON.stringify(props))
    ...
    }

console.log =

props for ModalAddUser: {"aprop":"works fine"}

Answer 1

JSON.stringify wouldn't serialize functions. if you try console.log(props) you should see your functions.