zyklus zyklus - 14 days ago 4
Javascript Question

React: render() and multiple children

I have a map component that's out of my control that renders all of it's direct children:

<map>
<point />
<circle />
<circle />
</map>


Now I'm trying to write a component that returns multiple objects:

<myComponent>
<circle />
<circle />
</myComponent>


But as the map only renders direct children, I'm not sure how to get this to work. Help?

Answer

If I am not wrong, I guess this is what you are looking for.

function MyComponent (props) {
  const objs = props.objs;
  const listItems = objs.map((obj) =>
    < {obj} />
  );
  return (
    <map>{listItems} </map>
  );
}

const objs = ['circle', 'circle'];
ReactDOM.render(
  <MyComponent objs={objs} />, //pass children i.e.,objs as props to the MyComponent
  document.getElementById('root')
);