Component does not react to changes in value outside of the Component about react-cron-generator HOT 6 CLOSED

@MrSauceman Thank you for reporting this, will fix this ASAP

from react-cron-generator.

@MrSauceman Just updated the component,

Using getDerivedStateFromProps need some major change in the component, it may cause other issues

i have added ref to the component now you can access state and functions using ref. You can change cron value from outside the component even after cron generator loaded,

add the new prop onRef={ref => (this.cronGen = ref)}

      <Cron
        onRef={ref => (this.cronGen = ref)}  
        onChange={(e)=> {this.setState({value:e}); console.log(e)}}
        value={this.state.value}
        showResultText={true}
        showResultCron={true}
        />

this.cronGen.setValue(/* Your new value */) 

Just call this.cronGen.setValue(/* Your new value */) to change the value when you need

please use v1.2.3

from react-cron-generator.

I was actually able to fix this using componentWillReceiveProps.

I cloned your previous version and made the following minor changes to a few lines and now the value updates properly without having to manually call this.cronGen.setValue(/* Your new value */).

I think these changes are more in the spirit of react, where your component re-renders automatically if the props change. Calling a separate function from a ref to update a prop just doesn't feel quite right for react.

If you want, I can PR this, or you can manually make these changes. They are very minor and will not break anything - I simply extracted the code from componentWillMount into its own function called setValue, called it from componentWillMount, and then added a call to it in componentWillReceiveProps.

Let me know what you think.

from react-cron-generator.

Yes i have already tried this componentWillRecieProps method
but it made some other mistakes like, when the onChange event called from inside the compoent to parent this will also call componentWillRecieveProps and running all those checks again, (at the initial time if no value supplied to the component this force to change to component to show the default tab)
This may create issues in other users

Yes i know creating ref is not suggested in react but as instant solution i am using this
i will definitely try to clear this in a better way as you suggested

Thank you

from react-cron-generator.

That if statement within componentWillReceiveProps that checks to make sure that the value prop has actually changed before calling setValue should take care of the problem you are describing. It will only set the value if it has changed, which is what you want. You want to keep your value state up to date with the value prop that is passed in. I think you want those checks to run every time the value prop changes to make sure you have the latest value.

from react-cron-generator.

I have updated the code as you mentioned
it looks working now
it was some other mistake which i found before
Thank you @MrSauceman

from react-cron-generator.