Multiple JSX elements with react

REactDev 0
Viewed 24

If we want to write multiple JSX elements we must wrap it with parent element or React Fragment element to be rendered successfully , Is there any way to write multipe jsx elements without need to wrap it with any parent or fragment element (like maybe make the fragment by default behind the scene without need to write it ) ,

function CustomBtn() {
  return (
    <h1>CustomBtn</h1>
    <h1>CustomBtn</h1>
  )
}
i know this will give Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag

i know that it's useless , because we can just use react fragment , but it's like a training task to dig deeper into react configuration

i think in babel , webpack or react dom packages but i can't solve it , any ideas ?

Thanks

webpack jsx babeljs reactjs
2 Answers

This is a good idea. But this is not customizable for the following reason.

React team made the interface of a component to be a single ReactNode. But for some functions, they also allow for an array of nodes, ReactNode[]. To be honest, internally they do support array, otherwise you won't be able to do {arr.map(v => <div />).

Therefore this is not something that you like or not, it's the interface definition of a React component. Imagine you design the component, you can choose to accept an array or a single. If you were the author, you could make that happen ;)

NOTE:

deep down there's another reason, each component accepts a ref. The ref is the DOM element reference, so a single mapping from one ref to a single React node is a more straightforward implementation.

windmaomao0

You can return array:

function CustomBtn() {
  return [
    <h1>CustomBtn</h1>,
    <h1>CustomBtn</h1>
  ]
}
skyboyer0
Related