Рендеринг массива компонентов в ReactJS

Question

Я пытаюсь построить этот массив с различными компонентами jsx. У меня есть функция, где я добавляю компоненты в этот массив, а затем возвращаю его.

let components = [];
switch (obj.type) {
case 'title':
      components.push = (
          <>
            <Grid item xs={12} md={8}>
              <h1>{obj.value}</h1>
            </Grid>
          </>
        );
        break;
  case 'subtitle':
        components.push = (
          <>
            <Grid item xs={12} md={8}>
              <h3>{obj.value}</h3>
            </Grid>
          </>
        );
        break;
 }

return components;

Когда я пытаюсь сделать это, он становится пустым. Я хотел бы знать, что я делаю неправильно, или как правильно достичь этого.

const ComponentRender = ({ components }) => (
    <div>
      {components.map((component, i) => (
        <div key={i}>{component}</div>
      ))}
    </div>
  );

return <ComponentRender components={components} />;

Answer 1

Вы назначаете pu sh вместо использования функции

вместо components.push = item do components.push(item)

Answer 2

Я думаю, это то, что вы пытаетесь сделать:

const Component = ({ obj }) => {
  if (obj.type === 'title') {
    return <h1>{obj.value}</h1>;
  }
  if (obj.type === 'subtitle') {
    return <h3>{obj.value}</h3>;
  }
  return <h1>unkown</h1>;
};
const ComponentRender = ({ components }) => (
  <div>
    {components.map((component, i) => (
      <Component key={i} obj={component} />
    ))}
  </div>
);


//render ComponentRender
ReactDOM.render(
  <ComponentRender
    components={[
      { type: 'title', value: 'title' },
      { type: 'subtitle', value: 'subtitle' },
    ]}
  />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>