React, как добавить множество объектов в компонент

Question

Есть компонент, в котором один элемент кнопка, как можно добавить ещё Button, пыталась добавить путём добавления ещё кнопок Button, но у меня выдаёт ошибку если сделать так

    const App = (): JSX.Element =>{ <Button variant="contained">test button</Button>
            <Button variant="contained">test button</Button>
    <Button variant="contained">test button</Button>
    <Button variant="contained">test button</Button>
}

исходный компонент

 import React from 'react';
 import { Button } from '@mui/material';

 const App = (): JSX.Element => <Button variant="contained">test button</Button>;

 export default App;

Answer 1

Должен быть один родительский элемент, т.е. нужно все кнопки обернуть в тег div или <>...</> Вот так:

import React from 'react';
import { Button } from '@mui/material';

const App = (): JSX.Element =>{
    
      return ( 
        <>
        <Button variant="contained">test button</Button>
        <Button variant="contained">test button</Button>
        <Button variant="contained">test button</Button>
        <Button variant="contained">test button</Button>
        </>
      )
  }
  
  export default App;

БЛОГ НА HUSL

React, как добавить множество объектов в компонент

Ответы (1 шт):