Encountering an error in my code: Error: Nav(...): Nothing was returned from render. This typically indicates a missing return statement or the need to return null.
I am trying to create a styled components navbar but struggling to correct this issue... Below 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')
);
Your assistance would be greatly appreciated as I am at a loss regarding what is causing this issue. Thank you in advance for any help provided.