Styjun

How can I render a child component or parallel component when a state is set?

Main component contains the following code

editValue(data) 
 console.log("edited")
 this.setState( edits:data , function() 
 console.log("edited value...")
 )

render() 
 return(
 <div>
 <TextComponent edit=this.editValue.bind(this)/> 
 <AreaComponent editedValue = this.state.edits/> 
 </div>
 )

TextComponent:

trigger = (data) => 
 this.props.edit(data)


render() 
 return (
 <div>
 <p onClick=this.trigger.bind(this,'clicked')>Click</p>
 </div>
 )

AreaComponent:

componentDidUpdate() 
 console.log("update - component")


componentWillReceiveProps(nextProps)
 console.log('receive - component');

Here when I click the <p> I got my console as following

edited
receive - component
update - component
edited value...

What my issue is the edited value that I set in state is not reflecting in my AreaComponent. All the componentDidUpdate() and componentWillReceiveProps() are triggered before setting the state. I want to get the state value inside my next component. What changes should I do in this code?

You seem to be misInterpreting the console results, you have looged edited value.. in the setState callback which is triggered after the component has updated due to a state change.

If you actually look into the componentWillReceiveProps and componentDidUpdate of childComponent and log the props in these lifecycle or as a matter of fact in render method you could actually see the updated value that you set in state.

You should think of setState callback as a lifecycle which is triggered after component updates similar to componentDidUpdate and componentDidUpdate of parent is triggered after componentDidUpdate of child components most often

Hey I tested out your code and it functions as you expected.

Here's a sandbox for you: https://codesandbox.io/s/7yry1onrq6

In order for you to see the changes after you click TextComponent just use the editedValue prop in the AreaComponent.

This is an example mirroring your code:

class AreaComponent extends React.Component 
 componentDidUpdate() 
 console.log("update - component");
 

 componentWillReceiveProps(nextProps) 
 console.log("receive - component");
 
 render() 
 return <p>this.props.editedValue</p>;
 

In the above example the editedValue is correctly changing after clicking.