Current section: Custom Components 22 exercises
solution

Props

Loading solution

Transcript

00:00 Okay, we've got a couple calculator usage usages right here So we need to make our calculator actually display stuff for that So we're going to accept some props, but I always almost always destructure this so I'm going to destructure left operator and right and

00:17 Then we're going to get the results. So let's get our result from operations. So here are operations and Our operator so plus minus multiply divide and then pass the left and the right and it will perform that calculation so now we've got our result and So here now we can say code

00:35 We'll say left operator, right close that up with a closing code and that equals the result we can put that in an output for Accessibility reasons and boom now, we've got one plus two is three. That is correct. Well done computer One divided by two is 0.5. Awesome. And that is props

00:56 The thing I wanted to drive home here is you don't always have to use children You can use anything that you want to call it Whatever you like and it doesn't always have to accept primitive types like this. It can accept an object It can accept other react elements all sorts of things that you can do with these components. So basically think of components as functions that accept arguments and

01:16 Think of because that's what they are and think of react elements or this JSX where you're calling them as Invocations of that function even though we just learned that you're not actually invoking the function react will later but that's kind of how you can think of that is just calling a function and You get total control over the props and the the names of those props and all of that

01:39 And so there you go, that is a little bit more experience with JSX and custom components. Good job