react - pass function by props in stateless and run in function - reactjs

Question

I want to call a function passed from a parent in react stateless component and run that function in the child (checkBoxhandleChange).
react do not recognize passed function (props) in side child function(checkBoxhandleChange).
I make a function for all of type components (checkbox, input, ....) in the parent and handle all
import React, { Component } from 'react';
import Input from "./base/input";
class Parent extends Component {
state = { data: [] }
handleChange = ({ currentTarget: input }) => {
const data = { ...this.state.data };
data[input.name] = input.value;
this.setState({ data });
console.log("handleChange", input.name, input.value);
};
render() {
const { data } = this.state
return (
<Input
label=" is active ?"
require={true}
type="textarea"
name={"reasons"}
value={data.reasons}
handleChange={this.handleChange}
/>
);
}
}
export default Parent;
child => Input.jsx
import {
Form,
Row,
Col,
} from "react-bootstrap";
import "./style.scss";
const Input = ({
name,
label,
value,
handleChange,
}) => {
function checkBoxhandleChange({ currentTarget: input }) {
console.log([input.name], input.value)
handleChange({ currentTarget: { name: input.name, value: input.checked } })
}
return (
<Row className="my-input">
<Col md={12}>
<Form.Group className="mb-3 col-md-12" controlId="formBasicCheckbox">
<Form.Check type="checkbox" label={label} name={name}
value={value}
onChange={checkBoxhandleChange} />
</Form.Group>
</Col>
</Row>
);
};
export default Input;

Answer 1

First of all I suggest you to remove your checkBoxHandleChange() from Input.jsx and directly call the handleChange() function from your child file using the props.
import { Form, Row, Col } from "react-bootstrap";
import "./style.scss";
const input = (props) => {
<div>
<Row className="my-input">
<Col md={12}>
<Form.Group className="mb-3 col-md-12" controlId="formBasicCheckbox">
<Form.Check type="checkbox" label={label} name={name}
value={value}
onChange={props.changedInput}/>
</Form.Group>
</Col>
</Row>
</div>
};
export default input;
You can then edit your parent file as such by modifying this line handleChange={this.handleChange} to this changedInput={this.handleChange}