How to import and use NextUI components in a react app?

[Samsonroyal]

Hello dear NextUI devs;

I have tried using the NextUI components in a demo react app; but I keep receiving errors; I don't know if I am doing it right. I will need some clarification.

The error log is displayed here

### Code from my app.js
`import` { NextUIProvider } from '@nextui-org/react';
import { ReactComponent as Logo } from "./logo.svg";
import Posts from "./components/Posts";
import Layout from "./components/Layout";
import './App.css';
import * as React from 'react';
function App() {
  return (
    <div className="App">
      <NextUIProvider>
        <Layout>
      </NextUIProvider>
      <header className="App-header">
      <Logo style={{ height: 200 }} />  
        <h1>Samson Galactic Posts</h1>
      </header>
      <Layout/>
      <Posts />
    </div>
  );
}
export default App;

Code from Layout.js (a component I am importing)

import { Grid } from '@nextui-org/react'; const Layout() => { return ( <ExampleBlock height={100}> <Text h6 size={15} color="white" style={{ margin: 0 }}> {text} </Text> </ExampleBlock> ); } return ( <Grid.Container gap={2} justify="center"> <Grid xs={4}> <Layout text="1 of 3" /> </Grid> <Grid xs={4}> <Layout text="2 of 3" /> </Grid> <Grid xs={4}> <Layout text="3 of 3" /> </Grid> </Grid.Container> ) } export default Layout;

[jrgarciadev]

Hey @Samsonroyal it's because you are not closing the first Layout tag, try doing it this way:

import * as React from 'react';
import { NextUIProvider } from '@nextui-org/react';
import { ReactComponent as Logo } from "./logo.svg";
import Posts from "./components/Posts";
import Layout from "./components/Layout";
import './App.css';

function App() {
  return (
    <div className="App">
      <NextUIProvider>
        <Layout />
      </NextUIProvider>
      <header className="App-header">
      <Logo style={{ height: 200 }} />  
        <h1>Samson Galactic Posts</h1>
      </header>
      <Layout />
      <Posts />
    </div>
  );
}
export default App;

I hope it helps you 👍🏻

[Samsonroyal]

Hello @jrgarciadev thanks for sparing time to answer my question; I applied the changes but I have more errors; seems something is wrong with my layout.js file. This is the output in my terminal

`

[etherealsunshine]

you need to specify an initial value for the constant with the = sign