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

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}