diff --git a/curriculum/challenges/english/03-front-end-libraries/react/manage-updates-with-lifecycle-methods.english.md b/curriculum/challenges/english/03-front-end-libraries/react/manage-updates-with-lifecycle-methods.english.md
index 48e022da60..efd2252f47 100644
--- a/curriculum/challenges/english/03-front-end-libraries/react/manage-updates-with-lifecycle-methods.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/react/manage-updates-with-lifecycle-methods.english.md
@@ -8,14 +8,15 @@ forumTopicId: 301397
## Description
-Another lifecycle method is componentWillReceiveProps()
which is called whenever a component is receiving new props. This method receives the new props as an argument, which is usually written as nextProps
. You can use this argument and compare with this.props
and perform actions before the component updates. For example, you may call setState()
locally before the update is processed.
+ Warning: componentWillReceiveProps()
and componentWillUpdate()
are deprecated since their usage can lead to bugs and inconsistencies. They were replaced to, respectively, UNSAFE_componentWillReceiveProps()
and UNSAFE_componentWillUpdate()
and they should be avoided in new code.
+Another lifecycle method is UNSAFE_componentWillReceiveProps()
which is called whenever a component is receiving new props. This method receives the new props as an argument, which is usually written as nextProps
. You can use this argument and compare with this.props
and perform actions before the component updates. For example, you may call setState()
locally before the update is processed.
Another method is componentDidUpdate()
, and is called immediately after a component re-renders. Note that rendering and mounting are considered different things in the component lifecycle. When a page first loads, all components are mounted and this is where methods like componentWillMount()
and componentDidMount()
are called. After this, as state changes, components re-render themselves. The next challenge covers this in more detail.
## Instructions
-The child component Dialog
receives message
props from its parent, the Controller
component. Write the componentWillReceiveProps()
method in the Dialog
component and have it log this.props
and nextProps
to the console. You'll need to pass nextProps
as an argument to this method and although it's possible to name it anything, name it nextProps
here.
-Next, add componentDidUpdate()
in the Dialog
component, and log a statement that says the component has updated. This method works similar to componentWillUpdate()
, which is provided for you. Now click the button to change the message and watch your browser console. The order of the console statements show the order the methods are called.
+The child component Dialog
receives message
props from its parent, the Controller
component. Write the UNSAFE_componentWillReceiveProps()
method in the Dialog
component and have it log this.props
and nextProps
to the console. You'll need to pass nextProps
as an argument to this method and although it's possible to name it anything, name it nextProps
here.
+Next, add componentDidUpdate()
in the Dialog
component, and log a statement that says the component has updated. This method works similar to UNSAFE_componentWillUpdate()
, which is provided for you. Now click the button to change the message and watch your browser console. The order of the console statements show the order the methods are called.
Note: You'll need to write the lifecycle methods as normal functions and not as arrow functions to pass the tests (there is also no advantage to writing lifecycle methods as arrow functions).
@@ -25,11 +26,11 @@ Next, add componentDidUpdate()
in the Dialog
component
```yml
tests:
- text: The Controller
component should render the Dialog
component as a child.
- testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find('Controller').length === 1 && mockedComponent.find('Dialog').length === 1; })());
- - text: The componentWillReceiveProps
method in the Dialog
component should log this.props
to the console.
- testString: assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,''); return lifecycleChild.includes('console.log') && lifecycleChild.includes('this.props') })());
- - text: The componentWillReceiveProps
method in the Dialog
component should log nextProps
to the console.
- testString: assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentWillReceiveProps.toString().replace(/ /g,''); const nextPropsAsParameterTest = /componentWillReceiveProps(| *?= *?)(\(|)nextProps(\)|)( *?=> *?{| *?{|{)/; const nextPropsInConsoleLogTest = /console\.log\(.*?nextProps\b.*?\)/; return ( lifecycleChild.includes('console.log') && nextPropsInConsoleLogTest.test(lifecycleChild) && nextPropsAsParameterTest.test(lifecycleChild) ); })());
+ testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(Controller)); return mockedComponent.find('Controller').length === 1 && mockedComponent.find('Dialog').length === 1; })(), 'The Controller
component should render the Dialog
component as a child.');
+ - text: The UNSAFE_componentWillReceiveProps
method in the Dialog
component should log this.props
to the console.
+ testString: assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.UNSAFE_componentWillReceiveProps.toString().replace(/ /g,''); return lifecycleChild.includes('console.log') && lifecycleChild.includes('this.props') })(), 'The UNSAFE_componentWillReceiveProps
method in the Dialog
component should log this.props
to the console.');
+ - text: The UNSAFE_componentWillReceiveProps
method in the Dialog
component should log nextProps
to the console.
+ testString: assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.UNSAFE_componentWillReceiveProps.toString().replace(/ /g,''); const nextPropsAsParameterTest = /UNSAFE_componentWillReceiveProps(| *?= *?)(\(|)nextProps(\)|)( *?=> *?{| *?{|{)/; const nextPropsInConsoleLogTest = /console\.log\(.*?nextProps\b.*?\)/; return ( lifecycleChild.includes('console.log') && nextPropsInConsoleLogTest.test(lifecycleChild) && nextPropsAsParameterTest.test(lifecycleChild) ); })(), 'The UNSAFE_componentWillReceiveProps
method in the Dialog
component should log nextProps
to the console.');
- text: The Dialog
component should call the componentDidUpdate
method and log a message to the console.
testString: assert((function() { const lifecycleChild = React.createElement(Dialog).type.prototype.componentDidUpdate.toString().replace(/ /g,''); return lifecycleChild.length !== 'undefined' && lifecycleChild.includes('console.log'); })());
@@ -47,7 +48,7 @@ class Dialog extends React.Component {
constructor(props) {
super(props);
}
- componentWillUpdate() {
+ UNSAFE_componentWillUpdate() {
console.log('Component is about to update...');
}
// change code below this line
@@ -105,11 +106,11 @@ class Dialog extends React.Component {
constructor(props) {
super(props);
}
- componentWillUpdate() {
+ UNSAFE_componentWillUpdate() {
console.log('Component is about to update...');
}
// change code below this line
- componentWillReceiveProps(nextProps) {
+ UNSAFE_componentWillReceiveProps(nextProps) {
console.log(this.props, nextProps);
}
componentDidUpdate() {