How to pass different function as props to the same component? - reactjs

Question

"I am trying to add comment functionality in my react application and I want to call different functions depending on my user type"
"I have successfully applied the logic and also I am able to post comments and save it."
Here's my Code for CommentForm.js
import React, { useState, Fragment } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { addComment } from '../../actions/userdata';
const CommentForm = ({ userdataId, addComment }) => {
const [text, setText] = useState('');
return (
<Fragment>
{/* <div className='bg-primary p'>
<h3>Leave a Comment</h3>
</div> */}
<form
className='form my-1'
onSubmit={e => {
e.preventDefault();
addComment(userdataId, { text });
setText('');
}}
>
<textarea
name='text'
cols='3'
rows='3'
placeholder='Any Other Comments..'
value={text}
onChange={e => setText(e.target.value)}
required
/>
<input type='submit' className='btn btn-dark my-1' value='Submit' />
<small> {'<==='} Press this button to save Comments</small>
</form>
</Fragment>
);
};
CommentForm.propTypes = {
addComment: PropTypes.func.isRequired
};
export default connect(
null,
{ addComment }
)(CommentForm);
and I am using this in some other file as
<CommentForm userdataId={userdata._id}/>
The problem is that I have around 9 functions like addComment say addcommenti, addcommentii, addcommentiii,.... and so on in ../actions/userdata.
and Hence I'll have to create 9 files.
I already tried
<CommentForm userdataId={userdata._id} addComment={addCommenti}/>
but it's not working i.e it's making call to addComment and not to addCommenti .
Any ideas on how to proceed ?
Here's my addComment Function
//Add Comment
export const addComment = (userdataId, formData) => async dispatch => {
const config = {
headers: {
'Content-Type': 'application/json'
}
};
try {
const res = await axios.post(
`/api/userdata/comment/${userdataId}`,
formData,
config
);
dispatch({
type: ADD_COMMENT,
payload: res.data
});
dispatch(setAlert('Comment Added', 'success'));
} catch (err) {
dispatch({
type: USERDATA_ERROR,
payload: { msg: err.response.statusText, status: err.response.status }
});
}
};

Answer 1

You have an imported function and a prop with the same name, that seems to cause the problem here: You think that you access the prop, but actually your component calls the imported function.
Try to remove the object destructuring in your CommentForm Component function and call this code instead:
// ...
const CommentForm = (props) => { /* <<-- HERE */
const [text, setText] = useState('');
return (
<Fragment>
<form
className='form my-1'
onSubmit={e => {
e.preventDefault();
props.addComment(props.userdataId, { text }); /* <<-- HERE */
setText('');
}}
>
<textarea
name='text'
cols='3'
rows='3'
placeholder='Any Other Comments..'
value={text}
onChange={e => setText(e.target.value)}
required
/>
<input type='submit' className='btn btn-dark my-1' value='Submit' />
<small> {'<==='} Press this button to save Comments</small>
</form>
</Fragment>
);
};
// ...
This will explicitly use the function that you pass into the props and can not call the imported function by accident.
Though, you could also rename the prop to something like onAddComment so your prop and imported function always use different names (which makes the easier to understand, in my opinion)

Answer 2

So two things:
If you need to use 9 functions in your component, even if you only need one per user type, I would pass all 9 functions down and handle the logic for which to use there.
In this case you just want to add the remaining functions as you have already.
If you do want to override an action which is being injected using redux so that you can decide which function to pass in the parent component you can do it using the functional version of mapDispatchToProp; it has a second argument ownProps which you can use:
const mapDispatchToProps = (dispatch, ownProps) => ({
addComment: (text, userdataid) => dispatch(addComment(userdataid, { text }),
...ownProps,
});
because I have spread ownProps after declaring addComment, you can pass addComment from the parent and it will replace the one we declared above.