score:1
you have various ways to achieve this.
in react you can render array of elements inside jsx, just like any other variable. if you wish to render components based some data that comes from api you could as well map your data and pass data to component. "key" property is required in both cases so react knows when structure changes.
live example on codesandbox https://codesandbox.io/s/bold-grass-p90q9
const list = [
<mycomponent key="one" text="im 1st!" />,
<mycomponent key="two" text="im 2nd" />,
<mycomponent key="three" text="im 3rd" />
];
const data = [
{ text: "1st string" },
{ text: "2st string" },
{ text: "3st string" }
];
export default function app() {
return (
<div classname="app">
<h3>render array</h3>
{list}
<h3>map from data</h3>
{data.map(({ text }) => (
<mycomponent key={text} text={text} />
))}
</div>
);
}
score:1
check this and let me know if this is what you want
sandbox
https://codesandbox.io/s/crazy-lalande-mx5oz
//have taken limit as 10 for demo
export default function app() {
function print() {
let group = [];
for (let i = 0; i <= 10; i++) {
group.push(<group key={i} />);
}
group.splice(1, 0, <banner/>);// adding banner at 1st index
return group;
}
return <div>{print()}</div>;
}
score:2
you can create an array of jsx.elements e.g.
const arr: jsx.elements[] = [];
listgroups.foreach((group, i) => {
if(i == 1) arr.push(<banner/>);
// add your groups
})
and you can render the arr
.
Source: stackoverflow.com
Related Query
- Insert a React component into an array
- Reactjs How to insert react component into string and then render
- Insert object into array at specific index in React
- How do you dynamically insert a React component into the DOM (for instance a dialog)?
- Dynamically insert react components into another react component
- React addons update - how to insert an object into an array of objects?
- Insert React component into a String variable with html content
- how to pass props into component from route array in react
- Not able to pass Array into another component in react
- How to pass a React component (or raw html) into other React component and insert it?
- Using map() to render an array in a react component into groups
- Insert React state variable into rendered array
- Insert custom React component into a String variable with html content
- Can't push React component into an array
- Got map of undefined when tried to pass array into children component in React
- array in a react component is getting converted into a number(which is of length of that array) after pushing an object into it
- Extracting React Array of Elements Into a Function Component
- How can I insert a line break into a String component in React JS?
- How to I insert a website into a React component
- Object into an array then return a component - React JS Application
- React addons update() with $splice - how to insert an object into an array of objects?
- Insert DOM element into React component
- React Redux not able to insert an object into nested array
- change object into array present another component in react
- Parsing an unnamed JSON array into React component
- Insert an array into state using useState hook in React
- React hooks array passing in number when passed into props of component
- Passing array into React stateless component
- How to pass in a react component into another react component to transclude the first component's content?
- Inserting the iframe into react component
More Query from same tag
- How To Load JSON Into an ag-grid Table (React)?
- paragraph text does not wrap correctly when in a mobile view - (CSS)
- Reactjs react-day-picker on Safari in iOS
- How to redirect to different component with URL in React
- Creating button with Loop ReactJS
- Unable to implement React-table sever data loading
- Using export Name from "./Name in create-react-app?
- Cannot perform a React state update on an unmounted component. Indicates memory leak
- Reset React-Select (Unform) after submit
- Correct way to require material-ui by webpack
- Select a document within the db.collection operation
- How to trigger alert message for incorrect data uploaded to array in React
- Using GridFS-Stream to send image file to Front-End React.js through Axios - Converting chunk to string base64
- How can I display web vitals metrics into my page footer with nextjs and react hook?
- React Router: Redirecting URLs with a specific param
- (Isomorphic) Back-end rendering of routes and ajax-based react components
- infinate loop while passing function as prop react
- How to use useState hook to map JSON response from API
- How to keep unique months in array of timestamps
- How to use spread operator on object create-react-app?
- How do I initialise firebase when using context in react?
- How to open child component modal from parent by using its key in ReactJs
- Uncaught ReferenceError: translate is not defined
- Typescript React component with propTypes
- React router, how to restore state after browser back button?
- Consistent url routing on client side React app served from Express
- Compressing the size of React Native apps
- create and open a pdf on a click of link and show print button with react-pdf
- Password Validator , using hooks , states are not updating , Showing No error
- Type any is not assignable to type never