call child function from parent in reactjs

Question

My parent component

import EditReview from './partials/editReview'

class VenueDetails extends Component {
  constructor(props) {
    super(props)
    this.child = React.createRef();
  }
  render() {
    return (
      <div className="place-review-text">
        <EditReview {...this.props}/>
      </div>
    )
  }
}

My child component

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

  render() {
    const { handleSubmit, user, pristine, index, commentCrossClick } = this.props
    return (
      <div>
        <Field
          name="content"
          component={renderTextArea}
          className="form-control"
          label="Write your review..."
          rows={2}
        />
      </div>
    )
  }
}

export default EditReview

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

Kindly help me

Edit

After upgrade I am getting this

Error in ./~/react-dom/lib/ReactServerRendering.js
Module not found: 'react/lib/React' in /home/user/ashish/LTC/lovethesecities-frontend/node_modules/react-dom/lib

After resolving all the errors call child function from parent in react 16

Shannon Johnstone · Accepted Answer · 2018-09-01 06:38:47Z

2

React docs have a example of this using refs

https://reactjs.org/docs/refs-and-the-dom.html

I’m also wondering the use case of wanting to do this, maybe some context could help with an answer?

answered Sep 1, 2018 at 6:38

Shannon Johnstone

1123 bronze badges

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

2 Comments

pesho hristov Over a year ago

My use case is that I have <Modal> <Form /> </Modal>. So when form is submitted - we have to call method of the modal to close it. And it is a method in modal cause I have to apply some CSS and then remove the modal itself. (The goal is to have animated removing of the modal . And I keep it in the modal so don't repeat it in every child.)

pesho hristov Over a year ago

(Of course, if you have a better idea - I'm all ears :) ...)

aravind_reddy · Accepted Answer · 2018-09-01 07:04:20Z

2

Try doing it like this:

import EditReview from './partials/editReview'

class VenueDetails extends Component {
  render() {
    return (
      <div className="place-review-text">
        <EditReview ref={Ref => this.child=Ref } {...this.props} />
      </div>
    )
  }
}

and call the function in parent component as this.child.onEditClick(param1,param2)

EDIT1:

if you have to do it with react 15.x itself what you can do it is create the function in parent and pass it as a prop to child

edited Sep 1, 2018 at 7:04

answered Sep 1, 2018 at 6:54

aravind_reddy

5,4964 gold badges28 silver badges41 bronze badges

2 Comments

aravind_reddy Over a year ago

why dont you create that function in parent and pass to child as a prop that seems to be the only option...

Ashh Over a year ago

yes but onClick handler is in parent component... Ok kindly wait I am upgrading

Collectives™ on Stack Overflow

call child function from parent in reactjs

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related