Passing function with parameter in react

August 17, 2022

I have a function in my react class where I am trying to pass a parameter like so:

class Comments extends Component {
    constructor(props) {
        super(props);   
        this.state = {Comments: filteredComments, selectedValues: []};
   this.updateReplies = this.updateReplies.bind(this);
   this.getSelectedValues = this.getSelectedValues.bind(this);
}

…….

updateReplies(minorRevision) {
    const ids = allComments.map(object => {
    return object.Id; 
   });

const minorRevisions = allComments.map(object => {
    return object.MinorRevision;
});
const localId = allComments[allComments.length - 1].LocalId + 1;
const newId = Math.max(...ids) + 1;
const comment = document.getElementById("txtComment").value;
const commentDate = toIsoString(new Date());
const newComment = {AttachmentId: null, Comment: comment, Commenter: {ItemId: '30837400-a72a-ec11-80d4-00155d006701', Name: 'Lewis Ross'},
Id:newId, IsDeleted: false, LocalId: localId, MinorRevision: minorRevision, ParentCommentId: null, 
Recipients: this.state.selectedValues,  Time: commentDate};  
    
allComments.push(newComment);
filteredComments = filterComments(allComments);
console.log(filteredComments);
this.setState({Comments:filteredComments});
saveReply();
};


   render() {
    return (
        <div>
            <RevisionHeader object={this.state.Comments} setChange ={this.updateReplies} getSelected = {this.getSelectedValues}   /> 
        </div>
        );
    }
}

and then in RevisionHeader:

    export function RevisionHeader(props) {

........

        <GetComments commentsArray = {arr} setChange = {props.setChange} getSelected = {props.getSelected}/>

.........


}

and then finally in GetComments which is where I will be setting the parameter value:

    export function GetComments(props) {
  return (
<React.Fragment>
  {props.commentsArray.map((comment, index) => {
........

    <button id="save-comment" type="button" onClick ={props.setChange(comment.MinorRevision)} className="btn">Save</button>

....

}

Now when I am not trying to use parameter and say within update replies I just do something like:

const minorRevision = 1;

and use that variable for the object, then I have no errors at all, but when I’m trying to pass the parameter I am getting the error:

Uncaught TypeError: Cannot read properties of null (reading ‘value’)

and it is referring to this line:

const comment = document.getElementById("txtComment").value;

but I’m assuming that can’t be the issue if it worked fine before? And I’m guessing it’s the way I am trying to pass the parameter that is wrong but I am not sure where it is I’ve gone wrong, any advice would be greatly appreciated

>Solution :

Let’s talk about this part of your code:

onClick ={props.setChange(comment.MinorRevision)}

This calls props.setChange() with a parameter and sets the onClick prop to whatever that returns. onClick should be a function, so if props.setChange() returns a function, this will work. However, I suspect props.setChagne() has the code that you want to execute when the user clicks. To do this, use an anonymous function:

onClick ={() => props.setChange(comment.MinorRevision)}

Here we create a new function that will be called when the user clicks. This function in turn calls props.setChange().

Another issue is with

const comment = document.getElementById("txtComment").value;

Generally, we don’t access the DOM directly like this in React. Instead, we use state to keep track of values and use those values directly. I suggest you read about state in React to learn more about how to do this.

These might not be the only issues with your code, but it will solve one piece.