Using same function in 2 react components. Second doesnt work

Question

I struggle with TypeError: deleteEducation is not a function - same function in 2 React components.

This component works.

    import React, { Fragment } from 'react'
    import PropTypes from 'prop-types';
    import { connect } from 'react-redux';
    import Moment from 'react-moment';
    import { deleteEducation } from '../../actions/profile';


    export const Education = ({ education, deleteEducation }) => {
        const educations = education.map(edc => (
            <tr key={edc._id}>
                <td>
                    <button className='btn btn-danger' onClick={() => deleteEducation(edc._id)} >Delete</button>
                </td>
            </tr>
        ));
        return (
            <Fragment>
                <h2 className='my-2'>Education Credentials</h2>
                <table className="table">
                    <tbody>
                        {educations}
                    </tbody>
                </table>
            </Fragment>
        )
    }

    Education.propTypes = {
        education: PropTypes.array.isRequired,
        deleteEducation: PropTypes.func.isRequired,
    }

    export default connect(null, { deleteEducation })(Education);

This doesn't. I would like to use another different method to deleteExperience(). It didn't work, so I tried same function but component name differs.

import React, { Fragment } from 'react'
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import Moment from 'react-moment';
import { deleteEducation } from '../../actions/profile';


export const Experience = ({ education, deleteEducation }) => {
    const educations = education.map(edc => (
        <tr key={edc._id}>
            <td>
                <button className='btn btn-danger' onClick={() => deleteEducation(edc._id)} >Delete</button>
            </td>
            </tr>
    ));
    return (
            <Fragment>
                <h2 className='my-2'>Education Credentials</h2>
                <table className="table">
                    <tbody>
                        {educations}
                    </tbody>
                </table>
            </Fragment>
    )
}

Experience.propTypes = {
    education: PropTypes.array.isRequired,
    deleteEducation: PropTypes.func.isRequired,
}

export default connect(null, { deleteEducation })(Experience);

I cant figure out what is wrong

        <Fragment>
            <DashboardActions />
            {profile.education.length ===  0 ? null : (<Experience education={profile.education} />)}
            {profile.education.length === 0 ? null : (<Education education={profile.education} />)}
        </Fragment>

This is my error

TypeError: deleteEducation is not a function
onClick
F:/DevConnector/client/src/components/dashboard/Experience.js:22
  19 |             )}
  20 |         </td>
  21 |         <td>
> 22 |             <button className='btn btn-danger' onClick={() => deleteEducation(edc._id)} >Delete</button>
     | ^  23 |         </td>
  24 |         </tr>
  25 | ));

My dispatched function

export const deleteEducation = id => async dispatch => {
    try {
        const res = await axios.delete(`/api/profile/education/${id}`);
        dispatch({
            type: UPDATE_PROFILE,
            payload: res.data,
        })
        dispatch(setAlert('Education Removed', 'success'));

    } catch(err) {
        console.log(err);
        const errors = err.response.data.errors;
        if(errors) {
            errors.forEach(error => dispatch(setAlert(error.msg, 'danger')));
        } 

        dispatch({
            type: PROFILE_ERROR,
        })
    }
}

Answer 1

You need to dispatch your function with params in your connect wrapper in both the components.

Change

export default connect(null, { deleteEducation })(Experience);

to

const mapDispatchToProps = dispatch => ({
  deleteEducation: id => dispatch(deleteEducation(id))
})
export default connect(null, mapDispatchToProps)(Experience);

Answer 2

My import was wrong which wasn't included in my post. Sorry React automatically added default import and I didn't notice.

import { Experience }  from './Experience';
import Education from './Education';