From 0057256bdf1340341da58f1424537ca8620486d9 Mon Sep 17 00:00:00 2001 From: Chetan Nada Date: Wed, 24 May 2023 21:56:23 +0530 Subject: [PATCH 1/4] Detailed Answer added with example in Question 218 --- README.md | 22 +++++++++++++++++----- 1 file changed, 17 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 0eec1d3d..5efaf5d6 100644 --- a/README.md +++ b/README.md @@ -4917,13 +4917,25 @@ 218. ### How to pass numbers to React component? - You should be passing the numbers via curly braces({}) where as strings in quotes + We can pass `numbers` as `props` to React component using curly braces `{}` where as `strings` in double quotes `""` or single quotes `''` ```jsx - React.render( - , - document.getElementById("container") - ); + import React from "react"; + const ChildComponent = ({ name, age }) => { + return ( + <> + My Name is {name} and Age is {age} + + ); + }; + const ParentComponent = () => { + return ( + <> + + + ); + }; + export default ParentComponent; ``` **[⬆ Back to Top](#table-of-contents)** From 552014a6fff65bd5a063feb03ef8c1d509fa9a83 Mon Sep 17 00:00:00 2001 From: Chetan Nada Date: Wed, 24 May 2023 22:25:26 +0530 Subject: [PATCH 2/4] Fix the issue of #254 --- README.md | 36 +++++++++++++++++++++++++++++------- 1 file changed, 29 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index 5efaf5d6..311408e2 100644 --- a/README.md +++ b/README.md @@ -773,14 +773,36 @@ 12. ### What is the purpose of callback function as an argument of `setState()`? - The callback function is invoked when setState finished and the component gets rendered. Since `setState()` is **asynchronous** the callback function is used for any post action. + `SetState` is an `asynchronous method`. `Asynchronous` means that the remaining code will get executed while the current action is being performed. Whereas `synchronous` code will block the code execution while the current action is being performed. So, if you want an action to be performed only after the state has been updated you can make use of a call back function. This `callback function` is put as an argument to setstate method. This is the exact purpose of defining a callback function as an argument of setState. - **Note:** It is recommended to use lifecycle method rather than this callback function. - - ```javascript - setState({ name: "John" }, () => - console.log("The name has updated and component re-rendered") - ); + ```jsx + import React from "react"; + + class App extends React.Component { + constructor() { + super(); + this.state = { + value: 0 + } + } + + call() { + this.setState({ value: this.state.value + 1 }, () => + console.log("Updated Value :" + this.state.value) + ); + } + + render() { + return ( +
+ +
+ ); + } + } + export default App; ``` **[⬆ Back to Top](#table-of-contents)** From b510a7daa840b0e6ca1b6ae9089f6c52efe92a17 Mon Sep 17 00:00:00 2001 From: Chetan Nada <83969719+chetannada@users.noreply.github.com> Date: Sun, 31 Mar 2024 19:23:05 +0530 Subject: [PATCH 3/4] Changes done as per Suggestion in PR --- README.md | 22 +++++----------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 311408e2..9905c8d6 100644 --- a/README.md +++ b/README.md @@ -4939,25 +4939,13 @@ 218. ### How to pass numbers to React component? - We can pass `numbers` as `props` to React component using curly braces `{}` where as `strings` in double quotes `""` or single quotes `''` + You should be passing the numbers via curly braces(`{}`) where as strings in quotes ```jsx - import React from "react"; - const ChildComponent = ({ name, age }) => { - return ( - <> - My Name is {name} and Age is {age} - - ); - }; - const ParentComponent = () => { - return ( - <> - - - ); - }; - export default ParentComponent; + React.render( + , + document.getElementById("container") + ); ``` **[⬆ Back to Top](#table-of-contents)** From 1d7e48a591dc05b36c7d78e64d55e17e49d8ace4 Mon Sep 17 00:00:00 2001 From: Chetan Nada <83969719+chetannada@users.noreply.github.com> Date: Sun, 31 Mar 2024 19:28:22 +0530 Subject: [PATCH 4/4] Changes done as per PR Suggestion --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 9905c8d6..2a6116ec 100644 --- a/README.md +++ b/README.md @@ -4939,10 +4939,10 @@ 218. ### How to pass numbers to React component? - You should be passing the numbers via curly braces(`{}`) where as strings in quotes + You should be passing the numbers via curly braces({}) where as strings in quotes ```jsx - React.render( + React.render( , document.getElementById("container") );