0

I have some issues while calling save button in parent class to call method save in child class. I need to find a solution to call save function from parent component 

class Parent extends React.Component{
 render(){
  return(
   <Child />
   <button onClick={Child.alert()}>save</button>
  **// this button should call alert function now.**
  )
}
}
export default Parent

// child component
class Child extends React.Component{
 alert= () => {
  console.log('child's alert called')
 }
render(){
  return(
   <button onClick={this.alert()}>Save</button>  
  **// this is calling alert right now**
   )
 }
}
export default Child

**//when save button of the parent class called, it should call the alert 
method in the child class.**
Div
  • 1
  • 3
  • @Shubham, in the original question there is a requirement that no refactoring with passing handling of data should be made, maybe in the current question it is possible to just lift up the `save` method to the parent, pass it as `props` to the child and not even use `refs`? – margaretkru Jan 04 '18 at 11:48
  • @margaretkru, yes that is possible, however the OP hasn't mentioned any information in the question that could help us reach any conclusion. The linked questions answers what the OP has asked – Shubham Khatri Jan 04 '18 at 11:53
  • someone new to `react` might not be aware of possible ways to achieve what he/she wants, and in the described situation I wouldn't recommend using `refs` if it is possible to move the `save` method into the parent component. @Shubham, what is your opinion? – margaretkru Jan 04 '18 at 11:57
  • @margaretkru, In a lot of situation it is possible to lift the state up and manage by passing handlers to the children, I would recommend OP to go through this answer https://stackoverflow.com/questions/46594900/reactjs-lifting-state-up-vs-keeping-a-local-state/47349693#47349693 and see what fits his needs, lifting the state up or calling a child component method – Shubham Khatri Jan 04 '18 at 12:00
  • yes, that's a good resource to read up a bit. I made a quick example on how the components in the current question can be organized to achieve what is asked, in case you are interested, @Anon. Here is the [link](https://codesandbox.io/s/03l18p9k2p). – margaretkru Jan 04 '18 at 12:04
  • Hi I have tried the refs method already. It's not working. and yes I'm quite new to react, I actually have few child components saving different data with different save buttons nested there only, now I need to make a common save button on parent that will call all the save methods inside the child component, and I cannot move the save calls from child to parent since they are working individually – Div Jan 04 '18 at 12:26
  • And I don't really want to use the redux store for the same, I mean it's the last resort if nothing works – Div Jan 04 '18 at 12:34
  • @Div, could you edit your question with more details and also providing more of your code so that we can better understand the problem you are facing? – margaretkru Jan 04 '18 at 12:46

0 Answers0