Solid JS Tutorial #5 - Using Props

Key Takeaways

okay then my friends so Sully JS much like other front-end Frameworks make use of something called props and props are basically just a way to pass custom Properties or values into other components for example I might want to pass some custom values into one of these card components so that we can use those values inside the component and every time we use a card component we can pass different values into it so they might be different each time around and the way we do this is almost identical to how we do it in react we would just pass in a prop name and we'd set it equal to some kind of value now that value could be a string or some other type like a number or a Boolean or an object Etc now if it's a string then we can just pass that string as a value in quotes but if it's a different type then we need to put the value inside curly braces Instead This Is How We output some kind of dynamic value or code in solid so if I passed in a number that would be in curly braces and the same would be true if I Boolean or an object or anything else that's not a string for now what I want to do is pass in a prop into this component called title which is a string and the value of that could be ninja t for t-shirt now we can accept that prop in the component by just using the props argument inside the component function that we automatically get now if you're coming from react this is where it's a little bit different because in react we'd probably just destructure values from the props object but inside we shouldn't do that because it could break its reactivity so make sure you don't destructure the props just keep it as props and then we can access the title prop on this props object in the template if we wanted to so now if we go to the browser we can see that title right here the value ninja T it's not in the other cards because we didn't pass it through but if we wanted to we could go back and we could add a title to each one of these and they could be different each time around so for example this could be ninja totes bag and then down here we could do another title which would be ninja hoodie like so so now if we save this we can see Ninja tote bag and ninja hoodie so this is a way to pass different data into the components okay so that's the title now also what I'd like to do is pass in some options for the card itself for example we have all these different styles right here now what I'd like to do is maybe have some props in these cards whereby we could say do we want a shadow or do we want round corners or something like that so that's what we're going to do now and what I'll do is I'll just comment out one of them because we only need two for this so we'll keep the titles but also I want a couple more props so those two props are going to be rounded and we're going to set that equal to true and then also flat and we're going to set that equal to false so this rounded one is going to be whether we want the card to have rounded Corners the Border radius if you like and this one right here is telling us whether we want the card to be flat or not and that refers to the Box Shadow so in this case we do want rounded Corners because this is true and we don't want it to be flat so we do want that box shadow and we're going to do something similar for this card down here but we'll have different values so rounded is going to be false and flat is going to be true okay then so let me save this now we need to use these different props over here in the cad and remember they're attached to this props object now the way we're going to work with this is by using some conditional classes because we want to conditionally output classes on this div dependent on the values of those props and the way we do that in solid is by using the class list attribute or rather property so we can say class list and we set that equal to something Dynamic and in fact it's an object and the way this works is we have properties and values now the properties are the class names we want to conditionally apply to it and the values of those are true or false if the value is true we apply that class if the value is false we don't so the classes or the property names we want here are going to be rounded MD and that's for this one right here rounded and also Shadow Ms because oops I think that should be Shadow MD alright not Ms so Shadow MD and that's for this prop right here flat so then we'll say in quotes rounded hyphen MD and the value of that is going to be props dots rounded and that's going to be true or false this thing right here yeah and then the next one is going to be shadow hyphen MD and that's going to be exclamation props dot flat and it's exclamation Because it's the opposite of this right so if flat is false then we do want the class so we reverse it okay and now we can take them off here because we don't want to apply them to every card only to cards based on these prop values all right so let's give this a whirl we should see that the first card is rounded and also has the Shadow the second one shouldn't be rounded and shouldn't have the shadow so let's check it out all right yeah rounded at the corners with a shadow not rounded and doesn't have a shadow awesome Okay cool so now we've seen how we can pass these props into components but using props like this does have its limitations for example what if I wanted to have lots of different content inside each of these cards so not just a different title but also maybe a different paragraph of text maybe a different image even a totally different template well then props wouldn't really be able to efficiently solve that because we don't want to be making props for loads of different content templates images all that kind of jazz that would get really messy right but what we can do is pass in custom content and templates using the children property on the props object so let me show you how that works so I'm first gonna get rid of the title prop in each of these components we don't need that anymore and you'll see why in a second and if we go to the component we can take out the props.title as well we don't need that and in fact I'm going to cut all of this so now we just have a div with no content inside the div just a div with classes now if we go back to app.jsx what I'd like to do is make this so now it's no longer self-closing so we have the closing tag as well and now I want to make it so we can pass a custom template and custom content into this card by nesting it inside these tags so I could paste in this content right here and I could put in a title for example Ninja t black like so now let me just scoot that in I'm going to copy that again I'm going to do the same thing down here your closing tag and then inside that I'm going to Output this template again we'll change the title and that's going to be ninja T and we'll do white for this we'll change the order of the content as well so let's grab that button and let's put it up here instead and maybe it will put a price at the bottom so only 10. pounds or something like that and we'll change the button text to view we'll do that on both so now we have different content going into each of these cards and we want to Output that content inside this div right here and the way we do that is just by using curly braces because we're outputting something Dynamic and then saying props dot children and this children property on the props represents whatever children we pass into the card and these are all the children right here the children elements if you like so it takes all of this content and it outputs it right here where we output props.children and now we should see that content this and this inside the cards so let's take a look and we do awesome so that's a nice way to pass custom templates and content into other components