0

I'm not asking what the three dots spread notation in React Javascript do I know what they do ok?
I learn ReactJs Javascript and read code and now I see this CodeSandbox

You see the code piece:

enter image description here

why in the code does the <Card> need the ...rest, it does not do anything with it or am I missing something?

What is the purpose to let the Card have the spread notation. ...rest ? This happens on like 10 places in the code on all <Card> objects please advice? It does not use the values contain in the spread notation or there are no values in the first place when all objects receiving the ...rest is created.

Also the className props is inserted into the <Card> object but it's not used liks so: className={clsx(classes.root, className)} , is that really needed?

Kid
  • 1,869
  • 3
  • 19
  • 48
  • @I get that but why in the code does the `` need the `...rest`, it does not do anything with it or am I missing something – Kid May 21 '21 at 09:51
  • 1
    "*It does not use the values*" - are you sure the `Card` component doesn't have any props other than `className`? Unfortunately you haven't posted its code. – Bergi May 21 '21 at 09:53
  • I included a CodeSandbox in my posts from the start did you miss that maybe or does the link not work? – Kid May 21 '21 at 10:01
  • 1
    when you use spread like { className, ...rest} , using layman explanation, you can say it's usually because only `className` is "important" to the Component, the component don't care about the rest of the props, so it will **pass down** the rest of the props, e.g. in the form of `
    `. By separating `className` and `rest`, you do not pass the rest of the props down to the children. `rest` can consist of all the rest of the *unknown* props e.g. style, data-src, disable, editable etc etc     – Someone Special May 21 '21 at 10:05
  • 2
    Material UI's `` component accepts many props other than `className`. For example, `raised`, `elevation`, `variant`, `children`. You can pass those props into ``, and they will be passed along to the ``. The way they are passed along is `{...rest}`. – Nicholas Tower May 21 '21 at 10:16
  • @NicholasTower, thanks I know how props work but why in this care are both {...rest} and className props inserted into the , it works ok if I remove them. I'm worried I missed something about Javascript React?? – Kid May 21 '21 at 10:20
  • 2
    Because whoever wrote this code wants to pass a className through (which they calculate in `Profile`), and they also want to pass everything else through (which they don't make any modifications to). If you don't want both, then don't do both. – Nicholas Tower May 21 '21 at 10:21
  • Thanks all, aha, but the Codesandbox is very well done code so I thought something advanced was going on heheh – Kid May 21 '21 at 10:26
  • "*I included a CodeSandbox in my posts from the start did you miss that*" - yes, it's easy to miss. Please [edit] your question to include all the relevant code in the post itself, screenshots and links are optional additions only. – Bergi May 21 '21 at 10:52

1 Answers1

-1

Just before some hours, i came across your question and had no idea about it. But i am taking a course and just by coincidence, he talked about {...rest}.

So how much i understood it is it is just a way to pass variable number of props to the component, i.e, when there is a posibility of unknown number of props.

If you have worked with python, i think {...rest} is just like *args in python which is used to take variable number of arguments.

Irfan wani
  • 4,084
  • 2
  • 19
  • 34