Sending handleChange function as a Prop to 2 or more components doesn't work

Question

Am trying to send a handleChange() function in two components as props, but the Materialize input doesn't allow to typing, meaning the handleChange() is not passed through.

What could be missing because I see all the flow is correct. Below is my components and their flows.

This is the ViewAllComments component which sends the handleChange as a prop

class ViewAllComments extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            body: ''
        };
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange = (e) => {
        this.setState({body: e.target.value});
    };


    render() {

        const  { comments }  = this.props.article;

        return (
            <div>
                <ViewListComments
                    comments={comments}
                    handleChange={this.handleChange}
                    clearHandler={this.clearHandler}
                    deleteComment={this.deleteComment}
                    modalCallEdit={this.modalCallEdit}
                    editComment={this.editComment}
                    body={this.state.body}
                />
            </div>

        );
    }
}

Then, this is the second functional component which receives the handleChange function as a prop as you can see in ViewComments component:

const ViewListComments = props => (

                    <div>
                        <Modal
                            id='foo'
                            actions=""
                            className={styles['align-edit-modal']}
                            header=''>
                            <ViewComments
                                handleSubmit={props.modalCallEdit}
                                value={comment.body}
                                handleChange={props.handleChange}
                                buttonsStyles={`row  right ${styles['edit-buttons-styles']}`}
                                labelComment={'Edit Comment'}
                                buttonText={'Edit'}
                                cancelText={'Cancel'}
                                handleCancel={props.clearHandler}
                            />
                        </Modal>
                    </div>
);

Then, lastly this is the third component which receives which receives the same handleChange function as a prop as you can see in the input the onChange propery.

const ViewComments = props => (
    <div>
        <div className='row'>
            <div className="input-field col s6 l9">
                <input id="body" type="text" name='body' onChange={props.handleChange} value={props.value} className="validate" >
                </input>
                <label className='active' htmlFor="comments">{props.labelComment}</label>
                <div className={styles['error-text-comment']}>{props.commentError}</div>
            </div>
        </div>
    </div>
);
};

With all that flow I expected my Materialize input to allow me to start typing since the handleChange is sent and I think it's received.

Answer 1

Change

   value={comment.body}

To

  value={props.body}

In ViewListComments component. The reason it's not working because you are not passing value to input element