Batuhan Tozun Batuhan Tozun - 21 days ago 7
React JSX Question

How can I check state is different from the props?

I have a props for example "shop_name" (this getting from redux). And I have to check this props different from my state's "shop_name" and disable my button.

For now i'm checking via this method;

isChanged() {
const changedShopName = this.state.shop_name !== this.props.shop_name;

return changedShopName;
}


And i'm passing new state with onchange func. and saving with this save func.;

onChange(event) {
const name = event.target.name;
const value = event.target.value;

this.setState({
[name]: value
});
}

saveSellerInfos() {
const data = {
shop_name: this.state.shop_name,
};

this.props.saveSellerInformations(data);
}


And here is my button with disabled field;

<Button
onClick={this.saveSellerInfos}
disabled={!this.isChanged()}
label={t('Save')}
className={styles.save}
/>


After the save function this props is not updating normally. How can i check nextProps after the save function and disabled my button?

Answer Source

this encapsulated in Button is not what you think it is, you will need to use .bind . as described here: https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56