Styjun

Scaling rounded rectangles in Illustrator

Convert Numbers To Emoji Math

How to make a kid's bike easier to pedal

How does jetBlue determine its boarding order?

How can I test a shell script in a "safe environment" to avoid harm to my computer?

Justification of physical currency in an interstellar civilization?

Are modes in jazz primarily a melody thing?

An adjective or a noun to describe a very small apartment / house etc

How is it believable that Euron could so easily pull off this ambush?

Make me a minimum magic sum

All of my Firefox add-ons have been disabled suddenly, how can I re-enable them?

What is the Ancient One's mistake?

Explaining intravenous drug abuse to a small child

Why were the rules for Proliferate changed?

How could a humanoid creature completely form within the span of 24 hours?

Appropriate age to involve kids in life changing decisions

If quadruped mammals evolve to become bipedal will their breast or nipple change position?

My large rocket is still flipping over

Why doesn't Remus Lupin turn into a werewolf in the scene where Harry looks for Peter Pettigrew on the Marauder's Map?

Displaying an Estimated Execution Plan generates CXPACKET, PAGELATCH_SH, and LATCH_EX [ACCESS_METHODS_DATASET_PARENT] waits

Function annotation with two or more return parameters

How to get file name from inside a latex file?

Which "exotic salt" can lower water's freezing point by 70 °C?

How to increase row height of a table and vertically "align middle"?

Is there any public react function that gets executed every time state is changed just like render function?

ReactJS - Does render get called any time “setState” is called?Invariant Violation: Objects are not valid as a React childreact state change doesn't rerender cloned childrenEnzyme test issues returns undefinedReact control parent state with input child on change methodHow get value datapicker in react toobox custom?Push state updates directly to conditionally rendered React component?Dealing with Nested React Components' State Changesmust be wrapped in an enclosing tagRender Object from State in React(MovieDb Practice)

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I have a child component. It should create an object from props and render it. This object should get added as a state.

Below is the current code.

Example:-

<popupComponent element=object />

popupComponent.js

class popupComponent extends Component constructor(props) 
 super(props);
 this.state = 
 name: ""
 
 

 updateName (event) 
 this.setState(
 name: event.currentTarget.value
 )
 


 publishElement () 
 this.props.saveAndClose(
 name: this.state.name
 );

 this.setState(
 name: ""
 )
 

 render() 

 return (
 <div draggable="true" >
 <h4>Name:</h4>
 <input id="elementName" type="text" placeholder="Enter element name" value=element.name onChange=this.updateName.bind(this)/>
 <button id="saveAndClose" onClick=this.publishElement.bind(this)>Save & close</button>
 </div>
 );
 


export default popupComponent;

Question: Which function other than render gets executed whenever state is changed? In this scenario constructor runs only once and I cannot try that because the time constructor gets executed, state isnt available.

reactjs

share|improve this question

asked Mar 23 at 6:29

VetrivelVetrivel

595

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  after render function calls componentDidUpdate ,before render function calls componentWillUpdate are the fucntion called whenever there is change in state or props
  
  – Kishan Jaiswal
  Mar 23 at 6:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  shouldComponentUpdate() is also called
  
  – Jibin Mathews
  Mar 23 at 7:11
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What do you want to do in that function? The question doesn't explain that, and this is what the answer may depend on.
  
  – estus
  Mar 23 at 10:05
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Resolved issue by conditionally not creating the component at all. Actual issue, Somehow this component's constructor was getting called only once but I wanted it getting called whenever it gets visually shown. Resolved issue by conditionally not including the component at all
  
  – Vetrivel
  Mar 23 at 10:37
  
  

  
  
  
  

add a comment | 

0

I have a child component. It should create an object from props and render it. This object should get added as a state.

Below is the current code.

Example:-

<popupComponent element=object />

popupComponent.js

class popupComponent extends Component constructor(props) 
 super(props);
 this.state = 
 name: ""
 
 

 updateName (event) 
 this.setState(
 name: event.currentTarget.value
 )
 


 publishElement () 
 this.props.saveAndClose(
 name: this.state.name
 );

 this.setState(
 name: ""
 )
 

 render() 

 return (
 <div draggable="true" >
 <h4>Name:</h4>
 <input id="elementName" type="text" placeholder="Enter element name" value=element.name onChange=this.updateName.bind(this)/>
 <button id="saveAndClose" onClick=this.publishElement.bind(this)>Save & close</button>
 </div>
 );
 


export default popupComponent;

Question: Which function other than render gets executed whenever state is changed? In this scenario constructor runs only once and I cannot try that because the time constructor gets executed, state isnt available.

reactjs

share|improve this question

asked Mar 23 at 6:29

VetrivelVetrivel

595

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  after render function calls componentDidUpdate ,before render function calls componentWillUpdate are the fucntion called whenever there is change in state or props
  
  – Kishan Jaiswal
  Mar 23 at 6:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  shouldComponentUpdate() is also called
  
  – Jibin Mathews
  Mar 23 at 7:11
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  What do you want to do in that function? The question doesn't explain that, and this is what the answer may depend on.
  
  – estus
  Mar 23 at 10:05
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Resolved issue by conditionally not creating the component at all. Actual issue, Somehow this component's constructor was getting called only once but I wanted it getting called whenever it gets visually shown. Resolved issue by conditionally not including the component at all
  
  – Vetrivel
  Mar 23 at 10:37
  
  

  
  
  
  

add a comment | 

I have a child component. It should create an object from props and render it. This object should get added as a state.

Below is the current code.

Example:-

<popupComponent element=object />

popupComponent.js

class popupComponent extends Component constructor(props) 
 super(props);
 this.state = 
 name: ""
 
 

 updateName (event) 
 this.setState(
 name: event.currentTarget.value
 )
 


 publishElement () 
 this.props.saveAndClose(
 name: this.state.name
 );

 this.setState(
 name: ""
 )
 

 render() 

 return (
 <div draggable="true" >
 <h4>Name:</h4>
 <input id="elementName" type="text" placeholder="Enter element name" value=element.name onChange=this.updateName.bind(this)/>
 <button id="saveAndClose" onClick=this.publishElement.bind(this)>Save & close</button>
 </div>
 );
 


export default popupComponent;

Question: Which function other than render gets executed whenever state is changed? In this scenario constructor runs only once and I cannot try that because the time constructor gets executed, state isnt available.

reactjs

share|improve this question

asked Mar 23 at 6:29

VetrivelVetrivel

595

<popupComponent element=object />

class popupComponent extends Component constructor(props) 
 super(props);
 this.state = 
 name: ""
 
 

 updateName (event) 
 this.setState(
 name: event.currentTarget.value
 )
 


 publishElement () 
 this.props.saveAndClose(
 name: this.state.name
 );

 this.setState(
 name: ""
 )
 

 render() 

 return (
 <div draggable="true" >
 <h4>Name:</h4>
 <input id="elementName" type="text" placeholder="Enter element name" value=element.name onChange=this.updateName.bind(this)/>
 <button id="saveAndClose" onClick=this.publishElement.bind(this)>Save & close</button>
 </div>
 );
 


export default popupComponent;

share|improve this question

asked Mar 23 at 6:29

VetrivelVetrivel

595

share|improve this question

asked Mar 23 at 6:29

VetrivelVetrivel

595

asked Mar 23 at 6:29

VetrivelVetrivel

595

asked Mar 23 at 6:29

VetrivelVetrivel

595

1 Answer
1

active

oldest

votes

0

Resolved issue by conditionally not creating the component at all.

Actual issue, Somehow this component's constructor was getting called only once but I wanted it getting called whenever it gets visually shown.

Resolved issue by conditionally not including the component at all as below.

this.state.show ? <PopupMarkupEditor 
 element = selectedElement
 saveAndClose = this.saveElement
 show = this.state.show
 /> : null 

share|improve this answer

answered Mar 23 at 10:39

VetrivelVetrivel

595

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55311226%2fis-there-any-public-react-function-that-gets-executed-every-time-state-is-change%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Resolved issue by conditionally not creating the component at all.

Actual issue, Somehow this component's constructor was getting called only once but I wanted it getting called whenever it gets visually shown.

Resolved issue by conditionally not including the component at all as below.

this.state.show ? <PopupMarkupEditor 
 element = selectedElement
 saveAndClose = this.saveElement
 show = this.state.show
 /> : null 

share|improve this answer

answered Mar 23 at 10:39

VetrivelVetrivel

595

add a comment | 

0

Resolved issue by conditionally not creating the component at all.

Actual issue, Somehow this component's constructor was getting called only once but I wanted it getting called whenever it gets visually shown.

Resolved issue by conditionally not including the component at all as below.

this.state.show ? <PopupMarkupEditor 
 element = selectedElement
 saveAndClose = this.saveElement
 show = this.state.show
 /> : null 

share|improve this answer

answered Mar 23 at 10:39

VetrivelVetrivel

595

add a comment | 

Resolved issue by conditionally not creating the component at all.

Actual issue, Somehow this component's constructor was getting called only once but I wanted it getting called whenever it gets visually shown.

Resolved issue by conditionally not including the component at all as below.

this.state.show ? <PopupMarkupEditor 
 element = selectedElement
 saveAndClose = this.saveElement
 show = this.state.show
 /> : null 

share|improve this answer

answered Mar 23 at 10:39

VetrivelVetrivel

595

this.state.show ? <PopupMarkupEditor 
 element = selectedElement
 saveAndClose = this.saveElement
 show = this.state.show
 /> : null 

share|improve this answer

answered Mar 23 at 10:39

VetrivelVetrivel

595

answered Mar 23 at 10:39

VetrivelVetrivel

595

answered Mar 23 at 10:39

VetrivelVetrivel

595