The first parameter logThis will be props object itself.You need to destructure the logThis object.

const ChildComp = ({ logThis }) => (
  <button onClick={() => logThis('test string')}>Click Here</button>
)

Or you can access it from props

const ChildComp = (props) => (
  <button onClick={() => props.logThis('test string')}>Click Here</button>
)

You can take this as an reference with live example demo https://codesandbox.io/s/modal-6fvyx

function App() {
  const [status, setStatus] = React.useState(false);
  const [text, setText] = React.useState("");

  const handleClick = () => {
   setStatus(prevStatus => !prevStatus);
  };
  const handleChange = e => {
   setText(e.target.value);
  };


  return (
    <>
      <button onClick={handleClick}>Open photo entry dialog</button>
      <ChildComponent
        isOpen={status}
        text={text}
        handleChange={handleChange}
        handleClick={handleClick}
      />
    </>
  );
}

const ChildComponent = ({ isOpen, text, handleChange, handleClick }) => {
  return (
    <>
      {isOpen && (
        <Model
          status={isOpen}
          handleClick={handleClick}
          text={text}
          handleChange={handleChange}
        />
      )}
    </>
  );
};

You would need to pass down each prop individually for each function that you needed to call

<CreateProfile
  onFirstNameChange={this.firstNameChange} 
  onHide={close}
  show={this.state.showModal}
/>

and then in the CreateProfile component you can either do

const CreateProfile = ({onFirstNameChange, onHide, show }) => {...}

with destructuring it will assign the matching property names/values to the passed in variables. The names just have to match with the properties

or just do

const CreateProfile = (props) => {...}

and in each place call props.onHide or whatever prop you are trying to access.

Function components get their props passed in as the argument to that function:

function Login(props) {
  useEffect(() => {
    props.getLoginData("test");
  }, []);
  // ...
}

// Or with destructuring:
function Login({ login, getLoginData }) {
  useEffect(() => {
    getLoginData("test");
  }, []);
  // ...
}

That said, if you're using a function component, then it's simpler to use hooks instead of connect:

function Login() {
  const login = useSelector(state => state.login);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getLoginData("test"));
  }, []);
  //...
}

// Note that there is no mapStateToProps/mapDispatchToProps/connect here
export default Login;