call child function from parent in react 16

Question

After upgrading to react 16 I am getting null in console.log(this.child)

My parent component

import EditReview from './partials/editReview'

class VenueDetails extends Component {
  constructor(props) {
    super(props)
    this.child = React.createRef();
  }
  editButtonClick = () => {
    console.log(this.child)
    this.child.current.onEditClick()
  }
  render() {
    return (
      <div>
        <button className="pull-right" onClick={() => this.editButtonClick(review, i)}>edit</button>
        <div className="place-review-text">
          <EditReview {...this.props}/>
        </div>
      </div>
    )
  }
}

My child component

class EditReview extends Component {
  onEditClick(review, editIndex) {
    console.log('ppp')
  }

  render() {
    return ()
  }
}

export default EditReview

I need to call onEditClick from the parent component. I tried this but doesn't work.

Kindly help me

Bhojendra Rauniyar · Answer 1 · 2018-09-01T08:38:03.997

1

You have to assign the ref:

<EditReview {...this.props} ref={this.child} />

Also, you don't need to use inline arrow function:

onClick={() => this.editButtonClick(review, i)}
// ------^^^^^ not required
// because, you're already using public class method

Just use:

onClick={this.editButtonClick(review, i)}

Define your method like this:

editButtonClick = (review, index) => { // to access review, i

edited Sep 01 '18 at 08:38

answered Sep 01 '18 at 08:23

Bhojendra Rauniyar

83,432
35
168
231

Inline arrow function because I am using child component in loop... And ***render() { return () // it's null }*** it is just to simplify the code in above question – Ashh Sep 01 '18 at 08:35
loop doesn't require inline arrow function. – Bhojendra Rauniyar Sep 01 '18 at 08:38
even to simplify the code, you may at least show oneline dummy content. don't do that again when you ask next question. – Bhojendra Rauniyar Sep 01 '18 at 08:40

call child function from parent in react 16

1 Answers1

Linked