Questions tagged [react-fragment]
25 questions
25
votes
2 answers
Check if a child is React.Fragment
As I see React.isFragment is only a proposal for the moment: https://github.com/facebook/react/issues/12038
Is there a workaround to do something like
if (child instanceof React.Fragment) {
...
}
until that API is available.
Temporary solution…
Dmitry Druganov
- 2,088
- 3
- 23
- 32
21
votes
2 answers
Early returns in React sub render function: return null, [], or React.Fragment?
Let's say I have a simple component that may or may not render a Counter.
What's the best practice in React to express a blocked code path? Should it return null, [], or a Fragment?
class App extends Component {
renderCounter() {
if…
Tai
- 490
- 4
- 18
17
votes
3 answers
When to use React.Fragments?
I just learned about React Fragments.
I understand that fragments are slightly more efficient by creating less tree nodes and makes it cleaner when looking at inspector, but then why should we ever use as containers in React components? Should we…
yeehuboi
- 175
- 1
- 5
8
votes
2 answers
Can you use props on React.Fragment?
I know that a React Fragment can be used to group child components like this:
render() {
return (
);
}
But can you add props to it? Say you want to use the…
Paul Razvan Berg
- 16,949
- 9
- 76
- 114
8
votes
3 answers
Flow errors on or <>, but not
I am using react v16.3.0 and flow-bin v0.69.0
Using react Fragments with either or the shorthand <> syntax like so
import React from 'react'
const ComponentA = () => (
Component
…
davnicwil
- 28,487
- 16
- 107
- 123
6
votes
2 answers
How to render different message based on current url / url fragment
Here I am returning the current react dom stuff:
return (
{inProduction ? null :
user12861522
6
votes
2 answers
How to check if a React element will render anything
Say I'm making a wrapper component which should only render itself if some child nodes are passed in:
const Wrapper = ({children}) => {
if (!children) return null
return
{children}
}
The problem is that children could be a Fragment…
Tamlyn
- 22,122
- 12
- 111
- 127
3
votes
3 answers
What does a ReactFragment from "react" mean?
I was looking through a .tsx code that looked something like below.
import React, { Fragment, ReactFragment } from "react";
// ...
export interface PageProps {
children: ReactFragment;
commandBar: reactFragment;
// ...
}
export…
NIV
- 458
- 4
- 19
2
votes
0 answers
Check if child renders top-level React Fragment
Is there a way to programmatically check if a React Element returns a top-level React.Fragment component? For most use cases, react-is is the recommended way to check this type of behavior, but it does not work in this case. If a function component…
Charles Kornoelje
- 758
- 8
- 13
1
vote
1 answer
How to modify react/jsx-no-useless-fragment rule to allow <>{children}
I am all for getting rid of useless React Fragments <>
Barry Michael Doyle
- 9,333
- 30
- 83
- 143
1
vote
1 answer
How to forward input ref to a function by onClick button
I am trying to forward input ref text/string data to a function by clicking the button. but I cant forward or pass the data to my function by using button
--questionRef is my ref input data
--answerQuestion is my function
Deger Gökalp
- 13
- 5
1
vote
0 answers
Vscode <> changes color of tags to red and can't use any snippets / auto tag / auto import
When I use VS Code and add <> tag in my code, rest of the code turns red and I can't use an auto tag / snippets / auto import etc...
Does anybody experience this before? How can I fix it?
That's what my settings.json looks like:
{
…
Happy1234
- 537
- 3
- 15
1
vote
2 answers
Everything after the react fragment comes in the same color in VS Code (React Fragment)
As the arrow shows .. everything after the closed fragment comes in the same weird color, at the beginning I thought it might be a theme issue but then I recognized that it is not. I really need a solution for this.
I'm new to react by the way
I…
Muhammed Said
- 21
- 3
1
vote
1 answer
What is the difference between returning React.Fragment or an array?
Is there any difference between returning React.Fragment
function Foo(){
return (
<>
hey
hey
)
}
Or return an array of components
function Bar(){
return (
[
…
Vencovsky
- 28,550
- 17
- 109
- 176
1
vote
1 answer
What is the syntax to use React fragments in Reason-React
There is this old chat that suggests writing your own fragment wrapper, but I understand that fragment should now be natively supported.
However I couldn't quickly find the correct syntax for it.
Example of what I'm looking for:
Peter Lamberg
- 8,151
- 3
- 55
- 69