optimized code and explanation

coding-assignment.md

@@ -24,41 +24,47 @@ Again, I have already implemented this in InstaFood without knowing its actually
 
 <ans> Child -> Siblings</ans>
 
-I am implementing sharing data between Siblings feature in this chapter. For eg: There are multiple FAQs sections in the Help Page and all the FAQ answers are initially hidden, once the user clicks on any question, its corresponding answer is visible. If user clicks on any another question, the previous visible answer must be hidden and new answer must be visible. 
+I am implementing `sharing data between Siblings` feature in this chapter. For eg: There are multiple `FAQs sections` in the `Help` Page and all the FAQ answers are initially hidden, once the user clicks on any question, its corresponding answer is visible. If user clicks on any another question, the previous visible answer must be hidden and new answer must be visible. 
 
 All the `FAQ sections` are `Siblings` Components and `Help` is the `Parent` component. 
 
 <ans>Static Version : </ans>
-The data to display FAQ sections of Help page is mocked in config.js.Each section (faq) has an unique id, title (question) and description (answer). Loop through the FAQ array and display title and description of each FAQ in Section Components 
+The data to display FAQ sections of Help page is mocked in config.js. Each section (faq) has an unique id, title (question) and description (answer). Loop through the FAQ array and display title and description of each FAQ in Section Components 
+
+Normal Approach : Each section might have a state isVisible and setIsVisible funtion to update the state. If isVisible is true, then show description and if false show hide description. The problem with this approach is each section does not know the state of its sibling section (we need them to know each other because on opening one section others must hide). For them to know each other's state, `lifting up state` technique is used. By this technique, the state (visibleSection) is maintained by parent which contains the id of the visible section. 
+
 
 <ans>Show/Hide Description:</ans>
 
 ```javascript
-const [visibleSection, setIsvisibleSection] = useState(
-   {
-      id : 1,
-      status : false
-   }); /* Initial Dummy value */
+  const [visibleSection, setVisibleSection] = useState("");
+   /* Initially description of all questions are hidden */
+
 ```
 
-Giving the control of state `visibleSection` to the parent (Help Component) and child (Section) can modify the state only through the callback function  `setIsVisible` passed by the Parent (Help), in turn parent updates the state through `setVisibleSection`. This way the sibling components can be shown/hidden based on this state maintained by the parent. Initially description of all Section component is hidden. For this, a initial dummy value (id and status as false are set). 
+Giving the control of state `visibleSection` to the parent (Help Component) and child (Section) can modify the state only through the callback function  `setIsVisible` passed by the Parent (Help), in turn parent updates the state through `setVisibleSection`. This way the sibling components can be shown/hidden based on this state maintained by the parent. Initially description of all Section component is hidden. For this, " " is set as visibleSection. 
 
 
 ```javascript
-<Section key={question.id} id={question.id} title={question.title}
-  description ={question.description}
-  isVisible={visibleSection.status && visibleSection.id === question.id }
-  setIsVisible={(obj) => setIsvisibleSection(obj)}
+<Section key={question.id} id={question.id} title={question.title} description={question.description}
+   isVisible={visibleSection === question.id }
+   setIsVisible={(display) => {
+   if(display) {
+      setVisibleSection(question.id);
+   } else {
+      setVisibleSection(" ");
+   }}
+} />
 ```
 
-Since status is false, all section components `isVisible` will be 'false` and in Section component down arrow will be displayed. 
+Since visibleSection is empty, visibleSection === question.id will be false and all section components `isVisible` will be 'false` and in Section component down arrow will be displayed for all components(all descriptions are hidden). 
 
 ```javascript
 {
    isVisible ? (
-   <SlArrowUp onClick={() => setIsVisible({id : id, status : false})} className="cursor-pointer" />
+   <SlArrowUp onClick={() => setIsVisible(false)} className="cursor-pointer" />
    ) : (
-   <SlArrowDown onClick={() => setIsVisible({id : id, status : true})} className="cursor-pointer" />
+   <SlArrowDown onClick={() => setIsVisible(true)} className="cursor-pointer" />
 )}
 
 
@@ -67,15 +73,13 @@ Since status is false, all section components `isVisible` will be 'false` and in
 
 ```
 <ans>User clicks for the first time</ans>
-Once the user clicks on any section's down arrow button, the state that parent maintained is updated by the child through the callback funtion `setIsVisible` by setting status to true and id with the current section id.
-
-Now, in Help component `isVisible` is set to true, because of which the arrow changes to up arrow and description is displayed. Note that all other sections state is still false and no changes happens there.
+Once the user clicks on any section's down arrow button, the state that parent maintained is updated by the child through the callback funtion `setIsVisible` by setting true. Now, this value is passed as params (display) to callback function at line no: 51. Since display is true, setVisibleSection(question.id); will be executed and `visibleSection` is set with question.id. Now, {visibleSection === question.id } becomes true and `isVisible` is set `true`, because of which the arrow changes to up arrow and description is displayed. Note that all other sections state is still false and no changes happens there.
 
 <ans>Subsequent User clicks on same FAQ</ans>
-Now, if the user again clicks on up arrow, it's `setIsVisible` is updated with status `false` and `isVisible` in the parent will be false (check the condition at line no :50). Because of which the arrow changes to down arrow and description is hidden.  
+Now, if the user again clicks on up arrow, it's `setIsVisible` is updated with `false`. Now, this value is passed as params (display) to callback function at line no: 51. Since display is `false`, setVisibleSection(" "); will be executed and `visibleSection` is set with " ". Now, {visibleSection === question.id } becomes `false` and `isVisible` is set `false`, because of which the arrow changes to down arrow and description is hidden. 
 
 <ans>User clicks on different FAQ</ans>
-If the user clicks on another FAQ, that FAQ's `setIsVisible` is updated to true, because of which the arrow changes to up arrow and description is displayed. If any other FAQ description was visible, it's hidden because the `isVisible` state of parent now hold the newly clicked FAQ id which is different from question.id (check the condition at line no :50) and `isVisible` is set to true and all other visible descriptions are hidden.
+If the user clicks on another FAQ, that FAQ's `setIsVisible` is updated to true, because of which the arrow changes to up arrow and description is displayed in the similar way mentioned above at line 75. If any other FAQ section's description was visible, that will hidden because the `visibleSection` state of parent now hold the newly clicked FAQ id which is different from question.id (check the condition at line no :51) and `isVisible` is set to true for current section only and all other visible descriptions are hidden because other sections `isVisible` is false.
 
 ### React Context
 In the props drilling examples, we tried to pass userInfo through multiple components to reach NavComponent. Props drilling could be used when data need to be passed to a few (2-3 components) before reaching its destination component. But, what if there are lot of components in the hierarchy which needs to be crossed, it becomes tedious and inefficient. The solution to this is to store the data in Context which could be then accessed throughout the application. 

src/components/Help.js

@@ -31,16 +31,15 @@ const Help = () => {
       {FAQ.map((question) => {
         return (
           <Section key={question.id} id={question.id} title={question.title} description={question.description}
-          isVisible={visibleSection.id === question.id }
+          isVisible={visibleSection === question.id }
           setIsVisible={(display) => {
             if(display) {
               setVisibleSection(question.id);
             } else {
               setVisibleSection(" ");
             }
           }
-          }
-        />
+          } />
 
         )
       }