Error: Nav(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

Question

I have this error in my code: Error: Nav(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Im creating a navbar with styled components and i dont know how to correct this... the following is my code:

Navbar.js

import React from 'react'
import styled from 'styled-components'
import { FcSurvey } from 'react-icons/fc'

const Nav = () => {
    (
        <Wrapper>
            <Logo>
                <FcSurvey />
            </Logo>
            <h1>CV Builder</h1>
        </Wrapper>
    )
}

const Wrapper = styled.nav`
    display: flex;
    align-items: center;
    padding: 2rem;
    background-color: black;
    color: white;
`;

const Logo = styled.div`
    display: flex;
    margin: 1rem;
    font-size: 4rem;
`;

export default Nav

App.js

import React from 'react'
import Nav from './Components/Navbar'

const App = () => (
  <Nav />
)

export default App;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

I really dont know what im doing wrong, if any body could help me, i would be so thankfull.

Answer 1

Your functional component is supposed to return your JSX. Change your Nav like this.

Note for arrow functions : If your function body is enclosed in {}, you have to explicitly write a return statement.

const Nav = () => {
   return (
        <Wrapper>
            <Logo>
                <FcSurvey />
            </Logo>
            <h1>CV Builder</h1>
        </Wrapper>
    )
}