I have a form component I am passing to App.js but I am getting this error

Question

Getting this error when render the app. SignIn(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

SignIn.js

import React, { useState, useRef } from "react";
import axios from "axios";
import swal from "sweetalert";
import "./SignUp.css";
import image from './img/signup.jpg'




const SignIn = () => {
  const [creds, setCreds] = useState({ userName: "", password: "" });
  const usernameFieldRef = useRef();
  const passwordFieldRef = useRef();


  const changeHandler = e => {
    setCreds({ ...creds, [e.target.name]: e.target.value });
  };

  const handleSubmit = event => {
    event.preventDefault();
    console.log('login');
    const username = usernameFieldRef.current.value;
    const password = passwordFieldRef.current.value;
    axios
      .post("https://foodiefun-api.herokuapp.com/api/auth/login", {
        username,
        password
      })
      .then(res => {
        console.log("DATA", res.data)
        localStorage.setItem('token', res.data.token)
        swal(
          "Welcome to Foodie Fun!",
          "You are now signed in, enjoy your stay!",
          "success"
        );
      })
      .catch(err => {
        console.log('LOGIN FAILED', err.response); // There was an error creating the data and logs to console
      });


    return (
      <div class="page-content">
        <div class="form-v6-content">
          <div class="form-left">
            <img className="form-image" style={{ linearGradient: "red, blue", opacity: ".6" }} src={image} alt="form" />
          </div>
          <form
            onSubmit={handleSubmit}
            class="form-detail"
            method="post">
            <h2>Register Form</h2>
            <div class="form-row">
              <input
                ref={usernameFieldRef}
                onChange={changeHandler}
                // value={creds.userName}
                type="text"
                name="id"
                id="user-name"
                class="input-text"
                placeholder="Enter Desired User Name"
                required />
            </div>
            <div class="form-row">
              <input
                ref={passwordFieldRef}
                onChange={changeHandler}
                value={creds.password}
                type="password"
                name="password"
                id="password"
                class="input-text"
                placeholder="Password"
                required />
            </div>
            <div class="form-row">
              <input
                type="password"
                name="comfirm-password"
                id="comfirm-password"
                class="input-text"
                placeholder="Comfirm Password"
                required />
            </div>
            <div class="form-row-last">
              <input type="submit"
                name="register"
                class="register"
                value="Register" />
            </div>
          </form>
        </div>
      </div>
    )

  }
}


export default SignIn

App.js

import React, { useState } from "react";
import "./App.css";

import Form from "./Components/SignIn";
import ReviewForm from "./Components/ReviewForm/ReviewForm";
import UserInfo from "./Components/userInfo";
import mockarray from "./Components/mockarray";
import Navbar from "./Components/Navbar";
import RecipeApp from "./recipes/RecipeApp";
import SignUp from "./Components/SignUp";
import SignIn from "./Components/SignIn";

const App = () => {
  const [reviews, setReviews] = useState([]);

  const addReview = restaurant => {
    setReviews([...reviews, { ...restaurant, id: Date.now() }]);
  };

  return (
    <div className="App">
      <Navbar />
      <SignUp />
      <SignIn />
      {/* <RecipeApp /> */}
      {/* <ReviewForm /> */}
      {/* <ReviewForm addReview={addReview} /> */}
      {console.log(reviews)}
      {/* <UserInfo data = {mockarray} /> */}
    </div>
  );
};

export default App;

Two forms should be rendering on the screen but when I comment in the SignIn page I get this error. A couple of people have looked at it and they both say everything is right. I'm stumped!

Answer 1

Your return statement is inside the handleSubmit function.