Error: Rights(...): Nothing was returned from render

Question

I have the following code in my app, which is supposed to add copyright info at the bottom of a page. However, when I try to import a component, either nothing is returned or the import itself is out of scope.

This is my first Node app of really any size and things seem to work somewhat differently than Ruby's Liquid syntax, whose imports I'm a bit more familiar with.

How should this be done?

Contact.js

import React, { Component } from "react";
import { Link } from "react-router-dom";

class Contact extends Component {
  render() {
    return (
      <div>
        <form
          action="https://formspree.io/[email protected]"
          method="POST"
        >
          <div id="nameplate">
            <h2 id="contact">Contact Me</h2>
            <p>Get in Touch</p>
          </div>
          <label htmlFor="fname">First Name</label>
          <input
            type="text"
            className="field"
            name="firstname"
            placeholder="John"
          />
          <label htmlFor="lname">Last Name</label>
          <input
            type="text"
            className="field"
            name="lastname"
            placeholder="Smith"
          />
          <label htmlFor="email">Email</label>
          <input
            type="text"
            className="field"
            name="_replyto"
            placeholder="[email protected]"
          />
          <label for="message">Message</label>
          <textarea className="field" name="message" placeholder=""></textarea>
          <input type="submit" name="submit" value="Submit" />
        </form>

        <Social />
        <Rights />
      </div>
    );
  }
}

export default Contact;

Rights.js

import React from "react";

const Rights = () => {
  <p id="rights">&copy; 2020 Chris Finazzo</p>
}

export default Rights;

I plan to do the same approach with the Social component, but this is easier to show in an example.

Answer 1

Use round brackets to return JSX code.

Rights.js

import React from "react";

const Rights = () => (
  <p id="rights">&copy; 2020 Chris Finazzo</p>
)

export default Rights;

and import your component as default module:

Contact.js

import React, { Component } from "react";
import { Link } from "react-router-dom";
import Rights from "path/to/your/component";

...