Project 1 from 25 projects (Accordion)

 Today,

1 Made a component called Accordion.

2 Made a use state called selected with the initial value of null.

3 Made a data.js with all the values.

4 Made a data.map(Dataitem) taking dataitem as item props which takes each data from the API. Making Dataitem.questions the "h3".

5 On clicking the h3, a function is called "handleSingle" it sets the usestate of selected to the current id from function.

6 After Selected has a value from the clickEvent, if selected===Dataitem.id? a div is called which has the value of {DataItem.answer}.

7 Then we move to multiple Selection.

8 We add two more use state, enableMulti and multiple with initial values of false and [] resp.

9 when clicking on the h3 we also handle handleMulti funciton

10 In handleMulti, we make the multiple an array by setting its value to cpyMultiple.

11 Then we make an constant which takes the index of the array br using cpyMultiple.indexOf(currentId).

12 if the constant has the value of -1, we push the current Id to it. Else we splice the cpyMultiple with 1.

13 We add value for Dataitem.answer by adding the condition if multiple.indexOf(dataitem.id)!==-1

14 Now when we toggle the multi Selection button, we can select more than one options in the accordion.

15 Complition of project with few css stylings.

Comments

Popular posts from this blog

Project 4 of 25 Projects (Infinite Scroll)