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/add-event-listeners.english.md

@@ -61,9 +61,9 @@ class MyComponent extends React.Component {
   }
   // change code above this line
   handleEnter() {
-    this.setState({
-      message: this.state.message + 'You pressed the enter key! '
-    });
+    this.setState((state) => ({
+      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({
-      message: this.state.message + 'You pressed the enter key! '
-    });
+    this.setState((state) => ({
+      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({
-      submit: this.state.input
-    });
+    this.setState((state) => ({
+      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({
-      value: this.state.value + 1
-    });
+    this.setState((state) => ({
+      value: state.value + 1
+    }));
   }
   render() {
     return (
@@ -130,9 +130,9 @@ class Controller extends React.Component {
   this.addValue = this.addValue.bind(this);
   }
   addValue() {
-    this.setState({
-      value: this.state.value + 1
-    });
+    this.setState((state) => ({
+      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({
-      display: !this.state.display
-    });
+    this.setState((state) => ({
+      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({
-      display: !this.state.display
-    });
+    this.setState((state) => ({
+      display: !state.display
+    }));
   }
   render() {
     // change code below this line