First of all, everything is hard before it becomes easy. Don't get discouraged by initial setbacks ;-)
About your code, React is perfectly fine with rendering arrays of objects. Only, it prefers to have components instead of functions (which work too, but it's not the "React way", apart from some edge cases). That's why you could refactor your code to do the following:
Here, we have a component, RenderArrayMethods (note the capital first letter) which is nothing more than a function, and then we execute it using JSX notation.
Also, React is all about passing props, so try to modify your example to accept arrayMethods as a prop and then render it the way you would do normally.
Hey!
First of all, everything is hard before it becomes easy. Don't get discouraged by initial setbacks ;-)
About your code, React is perfectly fine with rendering arrays of objects. Only, it prefers to have components instead of functions (which work too, but it's not the "React way", apart from some edge cases). That's why you could refactor your code to do the following:
Here, we have a component,
RenderArrayMethods
(note the capital first letter) which is nothing more than a function, and then we execute it using JSX notation.Also, React is all about passing props, so try to modify your example to accept
arrayMethods
as a prop and then render it the way you would do normally.Ah ok so because I was trying to render it in the functional component that is why it was throwing the error with the objects array?
Not really, passing functions also work: codesandbox.io/s/twilight-frog-462...
Post your whole code for reference ;)
Ah ok so does it matter which way you approach? Is there such a thing as best practice in React?
Yes, using components is preferable. Your code renders fine: codesandbox.io/s/magical-smoke-gz6...