React Project Error: no-unused-expressions

1

Hi Fellow Campers!

I set up an IDE with create react app.
But I get keep getting an error: no-unused-expressions.
I am simply trying to import and display a component called Button.
I have tried different things to correct the error including:
moving the button component into the App.js and into a the same folder.

I plan to set up a Codepen React environment to see if can get past this.

Let me know if you have any thoughts.
Thanks!

App.js

import React from 'react';
//import './App.css';
import Button from './components/Button';

//class App extends React.Component {
function App() {
    return (
      <div className="App" id="quote-box">       
        <Button diplayButtonName={'click me'}/>
      </div>
    );
  }
export default App;

Button.js

import React from 'react';

const Button = (displayButtonName) => {
    <button>{displayButtonName}</button>
};

export default Button;

Then I get this error:

Failed to compile.
./src/components/Button.js
Line 4:5: Expected an assignment or function call and instead saw an expression no-unused-expressions

2 
const Button = (displayButtonName) => {
  <button>{displayButtonName}</button>
};

This here. You give the arrow function a code block (the curly braces) so it expects an explicit return. But you are returning nothing so you are returning undefined. You either need to use an implicit return or explicitly state it:

const Button = (displayButtonName) => {
  return (
    <button>{displayButtonName}</button>
  );
}

… or …

const Button = (displayButtonName) => (
  <button>{displayButtonName}</button>
);

Notice the distinction between parentheses and curly braces.

3

Thanks Kevin!
That’s extremely an helpful point that I missed going through the FCC curriculum.