score:0
working solution:
import react, { component, fragment } from 'react';
export default class cardcontainer extends react.component {
render() {
var arr = [
{
'id':1,
'title':'title',
'value':'test_value'
}
]
return (
<div>
{arr.map((el, idx) => (
<fragment>
<card title={ el.value } />
<cardextension value={ el.title } />
</fragment>
))}
</div>
);
}
}
score:0
the error message "adjacent jsx elements must be wrapped in an enclosing tag" means just that: the <card>
and <cardextension>
elements need to be wrapped in a parent tag.
now, you probably don't want to wrap the elements in a <div>
(since it would create unnecessary dom nodes), but react has a nifty thing called "fragments", letting you group elements without extra nodes.
here is a working solution for your example, using the fragment short syntax:
class cardcontainer extends react.component {
render() {
var arr = [{
'id':1,
'title':'title',
'value':'test_value'
}]
return (
<div>
{arr.map((el, idx) => (
<>
<card title={ el.value } />
<cardextension value={ el.title } />
</>
))}
</div>
);
}
}
Source: stackoverflow.com
Related Query
- React loop through array and render instances of multiple child component
- Loop through array and render multiple instances of a child component with that data with React?
- how can i loop through the array inside of an object. and render it in the react component
- How do I loop through child array and check if component exists React Testing Library
- Loop through an array of strings and render it as a Prop in a Component in React
- How do i render multiple props in a single component and then pass those props to a child component in React
- Loop through array of objects and display them in react component
- Map through an array and render a specified component in React
- React Loop through array and render
- loop through multiple objects inside the first array from JSON data displaying two arrays with objects in React using FUNCTION COMPONENT
- React JS: Loop through a multi-dimensional array and determine/load the correct component
- How do I wrap a React component that returns multiple table rows and avoid the "<tr> cannot appear as a child of <div>" error?
- Loop through array of file urls and download each one with React
- React function component setTimeout - Multiple render calls and rerenders (recommended approach) (fires multiple times)
- How to iterate through a list of objects from api and render it to jsx page React functional component
- loop through an array and show single item at a time with dynamic time duration like setTimeout or SetInterval in react js
- How to loop over images array and render them in a component for React?
- React Router v6 : How to render multiple component inside and outside a div with the same path
- Loop and return through 2d array in React
- What is the correct approach in React to loop through an array to build html-select list of items in a function and call it in render()?
- react loop through array of strings with delay and set the text value
- How to loop through an array an put create an array of objects using react and javascript?
- How do I map over an array of objects in React and then conditionally render a component based on a previous value?
- How to render a child component within parent component using react and typescript?
- how to loop through data and assign values to state array in react
- Render response data through mapping to a child html element... using React and updating state
- How to render the parent component in the child component using react and typescript?
- React JS - passing info from object and array as props to child component
- Loop continuously through an array onClick and render each element
- Loop and render Object array in React Typescript
More Query from same tag
- duplicate component onclick React
- Redirecting when catching an error from axios request
- Create an Dynamic Array Object with key value pairs
- Stop Audio on Route Change in React?
- Display HTML special character > and | in React
- Get data for react-excel-workbook component using fetch
- How to filter an array with fetched data in React.js?
- Cannot find module 'electron' in Electron + React + Webpack setup
- Set state to initial state after clicking the submit button
- Button not centering
- React useState changes all elements in an array in array of objects
- setState getting slower when using setTimeout in a recursion
- Separating presentational and logic components react/redux
- Render nav after login
- How can i add nested object inside my state dynamically?
- converted class to hooks getting 'Uncaught RangeError: Maximum call stack size exceeded at getFloorplan '
- React how to send object to onClick event
- can't pass javascript in jsx (TypeError: Cannot read property 'props' of undefined)
- React Redux Actions Types using typeof
- authorized route vs unauthorized routes reactjs not properly loading
- aws-amplify-react and nextjs breaks my user context
- React.js is losing focus with controlled form input
- How to test an array length of a react component?
- Is there a way to setup a getter in redux toolkit store?
- Regex Help on finding string with non repeating highlighter
- how to only get child route back on next js?
- scss wrong selector being matched
- setState always (I want to setState Status as success always if I go to the previous screen or go to the next screen)
- Socket.io doesn't fire disconnect on browser back button in my React App
- Conditional rendering in React based on the onClick property of the IconButton component in Material UI