Build a React Accordion Component Dropdown from Scratch

yo what is good everyone so today i want to show you how i created this accordion using react so it's fairly basic and simple and essentially accordions or little drop down just showing different information so typically you see these were like frequently asked questions on websites but here i decided to find the most random jokes i could on the internet and then show you that as the example so the first one here is what do you call a dog magician click it to check it out animation a labra cadaprador all right i know it's cringe is cringe we can see here this is what basically we're going to make we got the little plus sign and then it drops it down and then also i click here what do you call a funny mountain this one's hilarious oh my goodness these jokes i don't know who made these jokes though but uh and the last one here is what did the astronaut say when he crashed into the moon and he was like is my bad i apologize all right i'm gonna stop i'm gonna stop with that guys but let's just get into the code editing let me show you how i built this so in order to create this i'm just gonna go ahead and open up the terminal and create the react app so go ahead open up your terminal and just type in npx then create dash react dash app and let's call this react accordion and i just put yt for youtube and i'll just put version one you can name it whatever you like and once that finishes up i will see you once it's completed so it is done so i'm just go ahead and cd into this so react accordion yt version one and then i have vs code so i'll just type in code dots auto opens for me and then here we can just drag this over and let me just exit over here let me just close this and i can just do command j and i have yarn so i'll just do yarn start it's probably asking me to make an mv file so let me just do that really quick so let's if you have this error you can follow along dot env but if you don't you can just copy this line here and actually yeah if you don't have that you're gonna ignore this but if you have it just do that and again if you have npm just doing a pm starter only so let me say you're gonna start again and let's just bring this down here so let me drag it over here and then let's keep it like yeah that looks good so we go src uh first thing let's just get rid of the logo don't need it and index i don't need this here so technically i can just go to the app you can get rid of this logo here i can just go in here just type in random stuff so it loads and index let's check it make sure index.css is gone just save it and let's see what happened here i'm here let's see i got all right logo here or no okay yeah it's refreshing fixes everything so right now we could do is go to src new folder let's just create a components folder and just keep everything simple so for this project really basic let's just create a data file and let's just do a new file let's do accordion.js and right now let's go and let's pass i actually go to this little extensions here make sure you have es7 installed this one so we can add little snippets so install this one and then let's go back and then accordion.js let's do rafce and then here i'll be like accordion we'll save it and then i can go to app.js and just pass it in so let's see accordion and then i can do what i could do is control space so it highlights it and then auto imports if not you can just mainly type it and you can see we got it there so right now we can just do a little data file so this one's pretty simple but let's just do export cons which cause data and then here you just basically pass in an object with your value so you'd say question and then like what do you call a dog magician and then you basically say comma and then you can call this one like answer and they'll be a la bra da bra door it doesn't really matter and then what you do is you pretty much copy and paste this and then just that's it so i'm just helping my original ones just to save us some time but that's basically the data and then you can go back to the accordion now and what we can do is we can actually import this at the top so we can just say import and let's just call this the data because that's what we named it and it'll just be from dot slash data not prettier so it auto formats but we also let's go here and i have these codes you just click the plus sign you can just do uh yarn add styled components if you don't have yarn just do npm install and then also i forgot to add it we'll just do afterwards but uh let's do here real quick let's do import styled from styled components and then let's just do yarn out again i forgot to add it and let's do react dash icons and there's two icons i want to use but first let's import icon context and then that'll be from react icons and this is going to be a way to add styles by wrapping the entire icons around it and then they should do imports fi plus which would be the plus sign and f5 minus would just be the minus sign from rick icon slash fi now if you have your own icons then feel free to add those but here we should do this and now we can do is we can create our first component and also since i already have let me just close it so we can just say i'm gonna call this one uh cons accordion section so again i stop this just for this example but you'd have to refactor the css or the styles to fit like your own design and for now we can just do is uh you can actually just wrap it first we can just go like this and i can do command d so it selects the other div and then say accordion section like that and then i want to wrap everything with the icon uh contact provider so what you can do is do the parentheses by the return click here and press alt and up arrow and just put it in between there and then here let's just do icon context dot provider and the value for this would just be the this is again this is optional but i want my icons all to be colored hashtag zero zero ffb9 and then uh we'll do size of 25 pixels here and then we'll just close it and let's wrap here so that way when i save it there's no errors and it looks like everything's good so unless i have a semicolon somewhere all right yeah so now we can do is uh let's do this let's create a container style component so we actually could just go here and just do shift all down arrow and then pretty much we can just call this container again i'm just naming these for example purposes you know whatever you want to and i just want to wrap everything so let's erase this accordion just call this the container and then pretty much in the containers where we're gonna actually map through the data and then now we can actually display this so right now if you save it nothing's gonna happen so what we can do is just do curly braces the file data file is slowly called data so let's say data.map then i'll pass in an arrow function here and then pretty much it's going to return and then let's just wrap let's just put some fragments here so in these parentheses i'm just going to call this the item for the value and then index for my key and then basically what we want to do is display our data so we let's do this first so you can see what's happening so i have h1 and the first value i put is item so item dot the data label you called it so mine i called it the question so again this is there item that question is it shows that and then for the uh tell me if i do the p tag here and just do like uh item.answer and i say that you'll be able to see like all our jokes aka our little accordion values here so what we want to do is let's wrap this with let's call this wrap and then we'll do command x and go under the h1 and then under that i want to have a i'll just put a span tag here for the icons i just want to say if this is going to add some state so basically for now we could do is uh let's just leave that for now because uh right now technically let's delete spam we need to add some state so it's not going to make any sense but what we could do is add this here just so that the air goes away should there down arrow just go here and let's just just call this wrap so it doesn't give me the error and what's it saying it's not defined it should be in there okay so what we can do is right now i want to add some state really quick because actually let's let's style this first so because we have the data show so let's just style it really quick very basic so just go to accordion and again this is only let's say display flex i'm only styling it for this example so it's not like perfectly but it's just just the way i have it just for you to show so flux direction column let's do a line items center we can do justify content center here position we'll do relative because i want to add a position absolute height however you poured height and then background should be usc just wait so like this and then uh container we're going to say position absolutes again i just did this for this example so that the um design would be like this we're going to say like box shadow 2 pixels 10 pixels 35 pixels one pixels rgba one five three one five three oh shoot let's see i'm fine three one five three zero point three save it's now got a little box shadow action and then for the wrap this one's pretty easy but i'll just go here let me close this and let's do background let's see hashtag two seven two seven two seven save it okay now we got something there color will be white display i'll make it flex justify content i want to be spaced between because the icons will be uh spaced out and then align items center with a width 100 percent let's do text align center and cursor pointer and then let's just do the h1 really quick since we already have it i can just say padding to rem with font size of two ram so right now nothing's happening but uh this is what it looks like right now and what we need to do is let's add some state so let's go to the top we got some you state hook here i also need to add a comma yeah it sounds like this and then i'll save it real quick okay and then we can go under the accordion and pretty much i can just say cons and the first value just the value i'll say clicked is what i'm going to call it the initial state and then the function that changes it so always say set and i'm going to record it so it's like clicked here which would be use equal to use data set to false and then i'm gonna create a function called const toggle so it's called toggle and basically we're gonna look for the index so essentially what value we're clicking on and then we're just passing curly braces and then here i'm going to say if what happened if it's clicked is equal to the index then i want to return set clicked to no so essentially this is saying if uh if click question is already active then close it because if you if you have it already open like you don't want to open it twice right so you want to close it and then if not you just you'll set the click to the actual value which essentially ends up opening it so right now we can do is go to let's see here on the wrap we can set this on click and then i'll just pass in arrow function here and then we're just going to say toggle as a function called it and look for the index and i want to make sure i have the keys equal to index so that it knows what we're clicking on and then right now nothing's going to happen so let's go under the h1 really quick and let's do a span tag here and then let's basically pass in this let me do comment you can see it so curly braces here and i'm going to say if the clicked value is equal to index then we use a ternary operator to return the file minus icon else colon i'll do f5 plus so pretty much now if i save this see the icons here so i click it it's just changing the icon right so it's only changing the icon of whatever we clicked right now but what i want to do next is so here's a p tag right here i'm gonna wrap this with a stock component called i'll just call it one drop down which is basically the drop down here and so we can also do it we can say um cons drop down equals two star that div back ticks so we'll just save really quick so what i want to do is i want to say if the clicked is equal to the index then i just want to return parentheses now to sure to pass in this drop down and then right before the sub closing oh or the curly brace you do call it also i want to be known so i save it it basically looks like this so this is our code right here right under the wrap so now if i click it you can see you can see that we have like that so now we just gotta finish the styling so pretty much you can go and uh like let's see h1 under the h1 i can target the span and just say margin dash rights of 1.5 ram and then for the drop down we can just pretty much say background hashtag 1c1c1c save really quick you can open it so you can see it and then color hashtag 00ffb9 you can do the width a hundred percent you can set the height to 100 pixels display is flex we do flex direction is column justify content is center line items to be center border dash bottom which would be one pixel solid hashtag zero zero ffb9 and border this again this is optional i just want to add this effect would just be solid same exact thing here's your ffb9 and then last but not least we're going to do p tag would be um font size 2 ram so i'll save it here and then i just added an app.css i'll just paste this in because it's basic but uh here i just reset everything so like margin pounding box sizing and voila we got the accordion so again this is just super simple and basic but this is one way to implement it there's multiple ways you can do this but again let me know alternative ways brief out of the code send me your link i'll check it out and aside from that go ahead and like the video if you enjoyed this subscribe if you the channel comment down below any other videos you want me to make and i'll see you in the next one peace

Channel: Brian Design

Views: 44,224

Keywords: react accordion, react dropdown, react accordion tutorial, react accordion component, react accordion animation, react accordion toggle, react accordion hooks, react accordion from scratch, react accordion with icon, react accordion simple, react dropdown menu tutorial, react dropdown select, react js, react project, react tutorial for beginners, react hooks, styled components, reactjs tutorial, react js project, react js website, beginner react project, react

Id: fNKbo0bboyA

Length: 17min 55sec (1075 seconds)

Published: Thu Dec 03 2020