Insert a React component into an array

Question

I have a query about the best way to go about this. So i have a stateless component called <Banner/> which just displays an image and some text.

I then have an array of objects which generates a list of features on the homepage of my site. There's roughly 15 objects in this listGroups array so it renders 15 <Group/> components one after the other. The code for this is below

  {listGroups.map((group, i) => (group?.assets?.length > 0) && (
     <Group key={group.id} {...group} showTitle={i !== 0} large={i === 0} />
  ))}

I would like to insert my <Banner/> component into this list in a specific position, ideally after the first <Group/> is rendered. I can use array.splice and add the component into a specific position into the array but it isn't rendered on the page so I'm obviously missing something here.

The end result would be something like this

<Group/>
<Banner/>
<Group/>
<Group/>
<Group/>
and so on

Any help would be appreciated.

Murat Karagöz · Accepted Answer · 2020-02-21 10:45:17Z

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.

answered Feb 21, 2020 at 10:45

Murat Karagöz

37.8k16 gold badges82 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jimi Pajala · Accepted Answer · 2020-02-21 11:00:08Z

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>
  );
}

joy08 · Accepted Answer · 2020-02-21 11:27:32Z

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>;
}

answered Feb 21, 2020 at 11:27

joy08

9,6729 gold badges43 silver badges81 bronze badges

Collectives™ on Stack Overflow

Insert a React component into an array

3 Answers 3

Comments

Comments

Sandbox

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Sandbox

Comments

Your Answer

Sign up or log in

Post as a guest

Related