React EmblaCarousel - Functions are not valid as a React child - reactjs

Question

Can someone help. I have this error "Functions are not valid as a React child. This may happen if you return a Component instead of from render."
In codesandbox everything is working but when i place the code in my react app the error appears.
I am new to react so please explain how i can render EmblaCarousel...
import React, { useCallback } from "react";
import ReactDOM from "react-dom";
import EmblaCarouselReact from "embla-carousel-react";
import "components/partials/Carousel/styles.css";
function App() { {
return (
<div className="embla">
<EmblaCarouselReact
htmlTagName="div"
emblaRef={c => (emblaRef = c)}
options={{ loop: false }}
className="embla__carousel"
>
<div className="embla__container">
<div className="embla__slide">
<div className="embla__inner"></div>
</div>
<div className="embla__slide">
<div className="embla__inner"></div>
</div>
<div className="embla__slide">
<div className="embla__inner"></div>
</div>
<div className="embla__slide">
<div className="embla__inner"></div>
</div>
</div>
</EmblaCarouselReact>
<button onClick={() => prev()}>Previous</button>
<button onClick={() => next()}>Next</button>
</div>
);
};
}
export default App;
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

You're using a two curly bracket in here (one inside one) while defining a function, which makes it a function inside another function, rather then defining a component.
The correct code is here:
import React from "react";
import ReactDOM from "react-dom";
import EmblaCarouselReact from "embla-carousel-react";
import "components/partials/Carousel/styles.css";
function App() {
return (
<div className="embla">
<EmblaCarouselReact
htmlTagName="div"
emblaRef={c => (emblaRef = c)}
options={{ loop: false }}
className="embla__carousel"
>
<div className="embla__container">
<div className="embla__slide">
<div className="embla__inner"></div>
</div>
<div className="embla__slide">
<div className="embla__inner"></div>
</div>
<div className="embla__slide">
<div className="embla__inner"></div>
</div>
<div className="embla__slide">
<div className="embla__inner"></div>
</div>
</div>
</EmblaCarouselReact>
<button onClick={() => prev()}>Previous</button>
<button onClick={() => next()}>Next</button>
</div>
);
}
export default App;
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 2

The embla-carousel-react version you're using is highly outdated. I would recommend you to update to the latest version in order to enjoy the latest features and make sure it's compatible with later React versions:
npm install embla-carousel-react#latest --save
And make use of the useEmblaCarousel hook instead:
import React, { useCallback } from "react";
import ReactDOM from "react-dom";
import useEmblaCarousel from 'embla-carousel-react';
import "components/partials/Carousel/styles.css";
function App() {
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false });
const prev = useCallback(() => {
if (emblaApi) emblaApi.scrollPrev()
}, [emblaApi])
const next = useCallback(() => {
if (emblaApi) emblaApi.scrollNext()
}, [emblaApi])
return (
<div className="embla">
<div className="embla__carousel" ref={emblaRef}>
<div className="embla__container">
<div className="embla__slide">
<div className="embla__inner"></div>
</div>
<div className="embla__slide">
<div className="embla__inner"></div>
</div>
<div className="embla__slide">
<div className="embla__inner"></div>
</div>
<div className="embla__slide">
<div className="embla__inner"></div>
</div>
</div>
</div>
<button onClick={prev}>Previous</button>
<button onClick={next}>Next</button>
</div>
);
}
export default App;
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Don't forget to add the following to your CSS because this was done inside the legacy EmblaCarouselReact component before the useEmblaCarousel hook came along:
.embla__carousel {
overflow: hidden;
}
Here is the official documentation for usage with React.
Here is the official documentation guide that shows you how to setup previous and next buttons.