fix:Incorrect Usage of setState in React Challenge (#39290)

* fix:Incorrect Usaage of setState in React Challenge

* apply suggestion

* also set stage usage in other challenges

* fix setState usage in challenges

* correct syntax

* correct usage of useState in other files

* add current message to state

* remove current message from state

* change connect redux to the message app

* remove extra space

curriculum/challenges/english/03-front-end-libraries/react-and-redux/connect-redux-to-the-messages-app.english.md

@@ -85,10 +85,12 @@ class Presentational extends React.Component {
     });
   }
   submitMessage() {
-    const currentMessage = this.state.input;
+    this.setState((state) => {
-    this.setState({
+      const currentMessage = state.input;
-      input: '',
+      return {
-      messages: this.state.messages.concat(currentMessage)
+        input: '',
+        messages: state.messages.concat(currentMessage)
+      };
     });
   }
   render() {
@@ -202,10 +204,12 @@ class Presentational extends React.Component {
     });
   }
   submitMessage() {
-    const currentMessage = this.state.input;
+    this.setState((state) => {
-    this.setState({
+      const currentMessage = state.input;
-      input: '',
+      return {
-      messages: this.state.messages.concat(currentMessage)
+        input: '',
+        messages: state.messages.concat(currentMessage)
+      };
     });
   }
   render() {

curriculum/challenges/english/03-front-end-libraries/react-and-redux/extract-local-state-into-redux.english.md

@@ -97,10 +97,10 @@ class Presentational extends React.Component {
     });
   }
   submitMessage() {
-    this.setState({
+    this.setState((state) => ({
       input: '',
-      messages: this.state.messages.concat(this.state.input)
+      messages: state.messages.concat(state.input)
-    });
+    }));
   }
   render() {
     return (

curriculum/challenges/english/03-front-end-libraries/react-and-redux/manage-state-locally-first.english.md

@@ -107,10 +107,12 @@ class DisplayMessages extends React.Component {
     });
   }
   submitMessage() {
-    const currentMessage = this.state.input;
+    this.setState((state) => {
-    this.setState({
+      const currentMessage = state.input;
-      input: '',
+      return {
-      messages: this.state.messages.concat(currentMessage)
+        input: '',
+        messages: state.messages.concat(currentMessage)
+      };  
     });
   }
   render() {

curriculum/challenges/english/03-front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react.english.md

@@ -93,11 +93,13 @@ class DisplayMessages extends React.Component {
       input: event.target.value
     });
   }
-  submitMessage() {
+  submitMessage() {  
-    const currentMessage = this.state.input;
+    this.setState((state) => {
-    this.setState({
+      const currentMessage = state.input;
-      input: '',
+      return {
-      messages: this.state.messages.concat(currentMessage)
+        input: '',
+        messages: state.messages.concat(currentMessage)
+      };
     });
   }
   render() {
@@ -191,10 +193,12 @@ class DisplayMessages extends React.Component {
     });
   }
   submitMessage() {
-    const currentMessage = this.state.input;
+    this.setState((state) => {
-    this.setState({
+      const currentMessage = state.input;
-      input: '',
+      return {
-      messages: this.state.messages.concat(currentMessage)
+        input: '',
+        messages: state.messages.concat(currentMessage)
+      };  
     });
   }
   render() {

curriculum/challenges/english/03-front-end-libraries/react/add-event-listeners.english.md

@@ -61,9 +61,9 @@ class MyComponent extends React.Component {
   }
   // change code above this line
   handleEnter() {
-    this.setState({
+    this.setState((state) => ({
-      message: this.state.message + 'You pressed the enter key! '
+      message: state.message + 'You pressed the enter key! '
-    });
+    }));
   }
   handleKeyPress(event) {
     if (event.keyCode === 13) {
@@ -118,9 +118,9 @@ class MyComponent extends React.Component {
     // change code above this line
   }
   handleEnter() {
-    this.setState({
+    this.setState((state) => ({
-      message: this.state.message + 'You pressed the enter key! '
+      message: state.message + 'You pressed the enter key! '
-    });
+    }));
   }
   handleKeyPress(event) {
     if (event.keyCode === 13) {

curriculum/challenges/english/03-front-end-libraries/react/create-a-controlled-form.english.md

@@ -120,9 +120,9 @@ class MyForm extends React.Component {
   }
   handleSubmit(event) {
     event.preventDefault()
-    this.setState({
+    this.setState((state) => ({
-      submit: this.state.input
+      submit: state.input
-    });
+    }));
   }
   render() {
     return (

curriculum/challenges/english/03-front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate.english.md

@@ -69,9 +69,9 @@ class Controller extends React.Component {
     this.addValue = this.addValue.bind(this);
   }
   addValue() {
-    this.setState({
+    this.setState((state) => ({
-      value: this.state.value + 1
+      value: state.value + 1
-    });
+    }));
   }
   render() {
     return (
@@ -130,9 +130,9 @@ class Controller extends React.Component {
   this.addValue = this.addValue.bind(this);
   }
   addValue() {
-    this.setState({
+    this.setState((state) => ({
-      value: this.state.value + 1
+      value: state.value + 1
-    });
+    }));
   }
   render() {
     return (

curriculum/challenges/english/03-front-end-libraries/react/render-with-an-if-else-condition.english.md

@@ -51,9 +51,9 @@ class MyComponent extends React.Component {
     this.toggleDisplay = this.toggleDisplay.bind(this);
   }
   toggleDisplay() {
-    this.setState({
+    this.setState((state) => ({
-      display: !this.state.display
+      display: !state.display
-    });
+    }));
   }
   render() {
     // change code below this line
@@ -96,9 +96,9 @@ class MyComponent extends React.Component {
  this.toggleDisplay = this.toggleDisplay.bind(this);
  }
   toggleDisplay() {
-    this.setState({
+    this.setState((state) => ({
-      display: !this.state.display
+      display: !state.display
-    });
+    }));
   }
   render() {
     // change code below this line