score:2
the fact that they come through as an array is appropriate, and useful because react can optimize re-rendering if the order of the list changes based on the key
attribute. it's the fact they're in an array that makes react look for a key.
if you don't want them to be a list, per se, you could use a fragment instead:
const mycomponents = <>
<div>component 1</div>
<div>component 2</div>
<div>component 3</div>
</>;
that will still come through as a single entry in props.children
, but that entry will be a fragment, not an array, and react won't require keys on it, etc.
the only other answers i can think of are to put your other components in an array as well (but that will require they have a key
):
const app = () => (
<mylayoutcomponent>
{[...components, <div key="other">some other component</div>]}
</mylayoutcomponent>
);
const components = [
<div>component 1</div>,
<div>component 2</div>,
<div>component 3</div>,
];
const mylayoutcomponent = ({ children }) => {
console.log('✅ current child count', children.length);
console.log('✅ expected child count', children.flat().length);
return <div>{children}</div>
}
const app = () => (
<mylayoutcomponent>
{[...components, <div key="other">some other component</div>]}
</mylayoutcomponent>
);
reactdom.render(<app />, document.getelementbyid("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
or to ditch jsx for this one case and write the createelement
call directly:
const app = () => react.createelement(
mylayoutcomponent,
{
children: [
...components,
<div>some other component</div>
]
}
);
const components = [
<div>component 1</div>,
<div>component 2</div>,
<div>component 3</div>,
];
const mylayoutcomponent = ({ children }) => {
console.log('✅ current child count', children.length);
console.log('✅ expected child count', children.flat().length);
return <div>{children}</div>
}
const app = () => react.createelement(
mylayoutcomponent,
{
children: [
...components,
<div>some other component</div>
]
}
);
reactdom.render(<app />, document.getelementbyid("root"));
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
i can't think of a jsx way to do that.
score:2
Source: stackoverflow.com
Related Query
- Spread an array of components in render in React
- React render array of components
- Render React components from array
- Object.entries.map to render react components array
- render array of nested components in react
- Render array of objects from Redux store as React components
- How render react components from array
- How can I render an array of components in react without them unmounting?
- React not reordering array of components on render
- How to render components with array of objects in React
- the render order of an array of React components is wrong
- Is it OK to Render an array of components in React 16?
- Render dynamic list of react components from array of strings
- How does render work with an array of components in React
- Render components based on the data from a multidimensional array in React
- react render list of components using spread attributes
- React JS can't able to render components from Array
- How to render a nested array of React components
- React - Render Components based on Array - how to include functions from parent in mongoDB?
- Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
- How to render react components by using map and join?
- Rendering React Components from Array of Objects
- Rendering React components with promises inside the render method
- Sort an array of objects in React and render them
- Is there a way to render multiple React components in the React.render() function?
- Render Content Dynamically from an array map function in React Native
- Using for loops and switch cases in React to dynamically render different components
- React Iterate and insert components based on count of array
- Render array of inputs in react
- Render multiple components in React Router
More Query from same tag
- Axios, Proper way to make a post request for data including file, and Array object
- In ReactJs, How to dynamically change the Input type from "text" to "select"?
- Accordion only toggle first item
- Disable table pagination in Material-UI
- How to apply styles to multiple components using styled components
- setState in React not giving desired output
- String.split() method on object property set via API
- React hook useEffect dependency array
- React JS multi-country state dropdown menu
- Cant render dynamic content to my modal when clicking a picture
- How to get new token from Cognito from the frontend?
- Cannot access exposed Dockerized React app on Kubernetes
- React Render Children as component
- React: Update field values dynamically from separate input states
- React/Next clock example not working on localhost
- On hover and click I want to add border around my color box, how do I do that?
- React Leaflet Polygons not updating with properties
- Make Redux return an array instead of nested object
- Not able to install react-dom for react version v0.13.x
- What is the difference between React Native and React?
- Convert timestamp to local timezone in React or JavaScript
- how to dispatch action outside component in Redux-Toolkit + typescript?
- How to get params in component in react router dom v4?
- React Apollo Client - modify query data before it goes to cache
- How to use useStyle to style Class Component in Material Ui
- How to customise content in material-table (React)?
- Failed form propType: You provided a `value` prop to a form field without an `onChange` handler
- React.js: Is it possible to convert a react component to HTML DOM's?
- React Redux Unexpected token, expected ","
- Removing a specific element in an array with React