Another way to avoid this problem is by transforming the code in the return block into an array of elements.
I have never thought about this. Don't you need a unique key for elements in the array?
According to the React docs.
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.
Actually you do, I totally forgot about that. This is the reason I find it very inconvenient to use, because of the key. Thank you for the observation, I'll edit in a bit.
A quick question here. I know about HOC but i am struggling to make sense of the parameter. What is { children: React.ReactNode } part of the parameter?
That's actually Typescript code. For some reason, the online editor I am using to test my code was throwing an error because I didn't specify the children type, so I had to add it (probably Typescript was included in the dependencies). That code translates to: the children of this HOC should be of type React.ReactNode. If you don't work with TS, you can skip that code all together.
If you will ever want to learn TS, I would advise you to learn it separately from React, otherwise it will be very overwhelming, as you said. I had to learn them at the same time for work and sometimes I couldn't tell which one is a React feature and which one is TS. Good luck!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Thanks for the article.
I have never thought about this. Don't you need a unique key for elements in the array?
According to the React docs.
Or perhaps keys are for dynamic element lists?
Actually you do, I totally forgot about that. This is the reason I find it very inconvenient to use, because of the key. Thank you for the observation, I'll edit in a bit.
A quick question here. I know about
HOC
but i am struggling to make sense of the parameter. What is{ children: React.ReactNode }
part of the parameter?That's actually Typescript code. For some reason, the online editor I am using to test my code was throwing an error because I didn't specify the
children
type, so I had to add it (probably Typescript was included in the dependencies). That code translates to: thechildren
of this HOC should be of typeReact.ReactNode
. If you don't work with TS, you can skip that code all together.Thanks. I am already overwhelmed by the amount of material i have to learn. I don't want to add TS to the list.
If you will ever want to learn TS, I would advise you to learn it separately from React, otherwise it will be very overwhelming, as you said. I had to learn them at the same time for work and sometimes I couldn't tell which one is a React feature and which one is TS. Good luck!