Build React Accordion Without Any Libraries

a lot of people are still looking for some libraries to implement simple components inside Jack this is not correct this is why in this video we will Implement accordion just for our needs so you understand how you can Implement such components on your own [Music] so what is the accordion this is simply some sections with the title and the content and we can activate just one single section and when it happens then all other sections are closed and we can read the content of this one section so how we are planning our component as you can see here I already generated a react project and here on the top I have accordion data this is just an array with objects and in every single object we have a title and the content this is exactly one single section and here as you can see we have three sections now the question is what data we need inside accordion and actually the survey is sufficient and our accordion will be completely encapsulated inside additional component this is why here I want to write accordion and provide inside property sections and what is sections this is our accordion data that you see on the top we don't need anything else no here on the top I want to import our accordion from file accordion that we will create in a second so let's create our component accordion Dot gs6 and inside we just want to create our component accordion so here let's export it with default and this is our accordion now we already know what we're getting inside we're getting here sections this is where we can directly get them from props so what do we want to return here at least we want to return a div and this is our container with sections inside and in order to render our sections we need to use map here this is why let's map through our sections and we're getting here access to every single section and for now I just want to render here a div with section.title and this we're using here map we mastered to our div a key this is our unique identifier but essentially we don't have a unique identifier for our section this is why as a second argument I will use index and actually index is completely fine in this case because we have a static array which we don't change as you can see in browser our sections are rendered which actually means we successfully created our component but actually we will write some Logic for every single section this is why instead of div here and all logic here I want to create an additional component here on the top and it will be our accordion section and the bare minimum here is to get a section from the outside and to render it which actually means we can't remove this code with div here and just return it and instead render our accordion section here and pass inside our section so now our code is more splitted and it is easier to support it but we have a problem here this key I copied inside this is not correct we must use it outside this is right here we must provide the key and this is an index as you can see browser everything is working as previously now inside our accordion section we don't only want to render our title but also a description this is why here I will wrap a title in additional div and after this I want to copy it and render here section dot content as you can see in browser we see the content of follower sections and this is not correct only one section can be active at a time this is why here we must introduce a negative section indexed and I want to store it inside you state hook this is by here let's create something like active index and here set active index and here is our use statehook where on initialized by activating a first section now what we want to provide inside is a property is active section this is just a Boolean and we want to know inside if this specific section is active this is why here we can compare our index of the section and our active index and when they are equal this section is active now inside our accordion section we can add is active section and now we want to render our section content only if our section is active this is why is active section and section content as you can see in browser now it is working and only first section is activated additionally to that we want to highlight what section is activated this is where here inside our section title I want to wrap our title with one Motif and after this I want to create one modif and inside here I want to render either minus or plus depending if our section is opened this is why here is active section and then we want to render here minus in another case we want to run the here plus let's check in browser as you can see inside first section we see minus and inside second and third sections with C plus because they are closed but now it is really difficult to work with our accordion because with don't have any Styles this is by here I wanted some styles for our elements first of all here let's try styles for the whole accordion and here I want to add style of accordion Styles now here on the top let's create our accordion Styles which is just an object and here I want to set max width because essentially we don't want to set a fixed width on our accordion it should be fluid to the container until some point and this point is 600 pixels now let's style the title of our accordion section this is by here div style and here we will have accordion title Styles now let's create them here on the top this is also an object and first of all inside we must try display Flags because we have two elements and we want to put them left and right here justify content space between cursor Point padding 5 pixels and background round 21 aeca and the last thing that we want to style is our content this is by here div style and we will have here accordion content Styles so here let's create our Styles and we just need to provide here a padding 5 pixels and also a background and it will be 39 B9 D2 let's have a look as you can see in browser it is looking different first of all here we have maximum width 600 but also have different colors for our title and content and both elements title and minus sign are located inside correctly the only thing that is left to implement is activating of our other sections but also closing of the section and in order to do that we must provide inside our accordion section first of all set active index because we want to set it inside and additionally active index because we want to know what section is activated so here let's head to our props first of all set active index and also active index now we need to create a click event on our a title and let's name this function toggle section now here on the top let's create a function toggle section and what we want to do first we want to know if we're closing already the open section of where just open in a section this is by here we're calculating next index and it can be either now if we are closing our section because we don't need to activate anything or this is just a new index of another section and here what we want to check if our section is active then we're setting here now another case we're setting here section index but as you can see we don't have section index here inside because we didn't provide it from the outside this is by here let's create one more property and it will be section index and then site we're providing our index that we already have here now inside our accordion section we can add here our section index and now our next index is calculated correctly we just need after this to set an active index and provide inside our next index that we calculated and as you can see we even didn't use our active index so we can remove it from here and also from our props let's check if it's working now I'm reloading the page here and our section is activated and we can click on our title and close our first section but we can also click on our second title and activate second section or third section or we can just close that section and then our whole accordion is being closed and actually if you are interested to know how to work efficiently with local storage inside drag by writing your custom use local storage hook make sure to check this video also

Channel: Monsterlessons Academy

Views: 4,250

Keywords: react accordion

Id: TY45Yf5rRsg

Length: 9min 24sec (564 seconds)

Published: Thu Apr 27 2023