Build An Accordion In React From Scratch | ReactJS Tutorial

what's going on everybody today I'm going to be showing you how to make a accordion with react this is what we're going to end up with by the end I'm going to make a component called accordion first thing I'm going to do is import use effect and use state from react and then I'm going to import the CSS with this component we're going to have two props one being items the list items that are here and one being keep others open so when you open one of these the other one's close if they're already open to start we're just going to return a div with a class of accordion parent we're going to export this and import this into our app the data that we're going to be passing into this accordion items prop in this example it's going to be an array so each each of these objects there's going to be an ideal label and a function that renders some jsx we're going to pass this into our items we're going to set that keep others open to true for now so the first thing we're going to do in our accordion component is we're going to set some State this is going to take in the items that we passed into the prop and build off of those by that we're going to use the use effect hook and we're going to watch for the items so we're going to say if items set accordion items to an array and we're going to use the spread operator oh basically spread out the array that is returned from this items dot map and this we're going to map through the items array and return an item and each of these so we're basically going to return every property that was already there on item and we're going to add the toggled property and set it to false go to error here I was just missing up parentheses we are going to render these out so we're going to say accordion items we want to make sure they're there before this map runs so we're going to have this I forgot what this is called but it'll short circuit if this is not a truthy value accordion items.map and I'm going to call this list item and we're also going to get a key to make react happy so we're going to return a div class of I'm going to wrap this in a curly braces because we're going to add a dynamic class if the toggled state that we added here is true we're going to add this toggled class and if it's false we're going to add nothing and then after that we're going to add the key and inside this div we're going to have a button this is going to have a class of toggle and an on click of null for now and in this button we're going to have two elements we're going to have a paragraph tag which is going to render out the label and we're also going to render out a div this is for the direction indicators so in this case it's just a plus or minus you can have like a SVG or like a carrot so we're going to call this direction indicator we're gonna have another ternary based on the toggled state for each list item so we're going to say list item.toggled if that's true render a minus if it's false render a plus under the button we have another div called content parent so here we're going to have div class of content list item dot render content so now we're going to handle this on click we're going to call a function that we have not made yet called handle accordion toggle we're going to pass in the item that we're currently iterating through list item and this is coming from right here we're going to have a argument called clicked item we're going to set accordion items to an array and in this array we're going to spread through the current accordion items and we're going to map over these and in each iteration we're going to have an item we're going to make a toggled state we're going to set that to the current value of toggled on that item if the ID of the one that we clicked this is why you need some kind of unique identifier if clicked item.id equals item.id set toggled to whatever the opposite of the current toggled state is for that item we're going to say else if keep others open is false we're going to set them to false if the item that it's iterating over is not the one that you clicked if keep others open is false then they're going to be set to not toggled so now we're just going to return spreader operator to return all the properties from the item and we're going to say toggled so oh yeah nothing works now because we don't have any CSS have accordion parent so the part that's more important is this is the content parent it's what wraps the div that wraps the rendered content and I'll explain why why we even need this content one the way this works the way that this can be an animation instead of just popping in and out is actually based on the height and the max height Properties by default we're going to set max height to zero also overflow hidden and a transition we're going to say Max height 0.15 seconds and an ease out when it's toggled we're also going to set like the endporter when we have this toggled class on accordion we're going to set the content parent to Max height of 500 pixels you can set that to anything but the height will be dynamic based on what's in the content not based on what you do here that's just the max height so you need to have something and you also need for when it's closed you need another transition that targets the max height and the reason that I have this content div wrapping render content is so if you want some kind of style in this case it's going to be padding around whatever is in this box so it's not pushed up against the edge like on this one so I'm just going to say accordion content padding and I realize I don't have the background color cool we're not done I'm going to show you guys keep others open when I have that toggled to false when I open one the other one's close so that is the video I hope you guys liked it um wish me luck tomorrow I'm getting my wisdom teeth taken out so excited about that so excited about that I've got some new lighting really janky lighting I've got two light strips right there and I've got a light on the floor and I've got a sock on my microphone we're doing what we can hope you guys are liking the content we're getting closer to projects finishing up some UI stuff hopefully this one wasn't too all over the place I appreciate you guys some if you loved it like if you liked it watch another video if you want to peace peace I'll see you later

Channel: Jacob Broughton

Views: 1,425

Keywords: programming, coding, react, javascript, code, web development, web developer, become a web developer, learn web development, web dev, learn, teach, tutorial, how to learn programming, reactjs, react js tutorial, how to make accordion in react, reactjs accordion, javascrpt, beginner tutorial, learn programming, accordion component, component in react, accordion menu, how to make an accordion

Id: Y6AfeQIgtVw

Length: 7min 6sec (426 seconds)

Published: Sat Mar 18 2023