I have two ponents (Parent ponent & Child ponent) in my react app. I have two button clicks in my child ponent and I need to pass two props to the parent ponent. I use the code as follows. The problem is, I can't include both methods in the parent ponent's element, but I need to. How can I use both edituser and deleteuser functions in the parent ponent?

Child ponent:

class EnhancedTable extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      userID: 10
    };
    this.editByUserId = this.sendUserId.bind(this);
    this.DeleteByUserId = this.sendUserId.bind(this);
  }

  editByUserId() {
    this.props.onClick(this.state.userID);
  }

  DeleteByUserId() {
    this.props.onClick(this.state.userID);
  }

  render() {
    return (
       <button onClick={this.sendUserId}>
           <BorderColorIcon onClick={this.editUserById} className="action margin-r" />
           <DeleteIcon onClick={this.deleteUserById} className="action margin-r" />
       </button>
    )
  }
}

Parent ponent:

Import EnhancedTable from './EnhancedTable';

class Users extends Component {

  constructor(props) {
    super(props);
    this.state = {
      userID: null
    };
    this.editUser = this.editUser.bind(this);
    this.deleteUser = this.deleteUser.bind(this);
   }

  editUser(idd) {
    this.setState({
      userID : idd
    })
    console.log("User Edited");
  }

   deleteUser(idd) {
      this.setState({
        userID : idd
      })
      console.log("User Deleted");
    }

  render() {
     return(
         <EnhancedTable onClick = {(e)=>{this.editUser; this.deleteUser;}}/>
     )
   }
}

I have two ponents (Parent ponent & Child ponent) in my react app. I have two button clicks in my child ponent and I need to pass two props to the parent ponent. I use the code as follows. The problem is, I can't include both methods in the parent ponent's element, but I need to. How can I use both edituser and deleteuser functions in the parent ponent?

Child ponent:

class EnhancedTable extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      userID: 10
    };
    this.editByUserId = this.sendUserId.bind(this);
    this.DeleteByUserId = this.sendUserId.bind(this);
  }

  editByUserId() {
    this.props.onClick(this.state.userID);
  }

  DeleteByUserId() {
    this.props.onClick(this.state.userID);
  }

  render() {
    return (
       <button onClick={this.sendUserId}>
           <BorderColorIcon onClick={this.editUserById} className="action margin-r" />
           <DeleteIcon onClick={this.deleteUserById} className="action margin-r" />
       </button>
    )
  }
}

Parent ponent:

Import EnhancedTable from './EnhancedTable';

class Users extends Component {

  constructor(props) {
    super(props);
    this.state = {
      userID: null
    };
    this.editUser = this.editUser.bind(this);
    this.deleteUser = this.deleteUser.bind(this);
   }

  editUser(idd) {
    this.setState({
      userID : idd
    })
    console.log("User Edited");
  }

   deleteUser(idd) {
      this.setState({
        userID : idd
      })
      console.log("User Deleted");
    }

  render() {
     return(
         <EnhancedTable onClick = {(e)=>{this.editUser; this.deleteUser;}}/>
     )
   }
}

• javascript
• reactjs

Share Improve this question Follow edited Mar 25, 2019 at 14:20 David Johns asked Mar 25, 2019 at 14:05 David JohnsDavid Johns 1,76466 gold badges2323 silver badges6060 bronze badges 2

• 2 You may create another function and move all the functions to be called in it and reference it in JSX onClick attribute. – Mohammad Usman Commented Mar 25, 2019 at 14:06
• I did that and then console says that idd is not defined – David Johns Commented Mar 25, 2019 at 14:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

You missed your ()

<EnhancedTable onClick = {(e)=>{this.editUser(); this.deleteUser();}}/>

You are doing it right in

 <EnhancedTable onClick = {(e)=>{this.editUser; this.deleteUser;}}/>

A minor change is needed:

<EnhancedTable onClick = {(e)=>{this.editUser(e); this.deleteUser(e);}}/>

A quick reference for what changed here:

let x = () => {
 console.log('hello');
}

x; // This simply does nothing as it is just a reference to the function

x(); // This instead invokes the function