Passing function with parameter in react

Question

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

Code-Apprentice · Accepted Answer · 2022-08-17 17:37:31Z

1

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.

edited Aug 17, 2022 at 17:37

answered Aug 17, 2022 at 17:20

Code-Apprentice

84k26 gold badges162 silver badges289 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lross15 Over a year ago

changing the onclick is what solved it, thank you for that and I'll look to change how I'm getting the textarea input, thanks for the advice

Collectives™ on Stack Overflow

Passing function with parameter in react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related