I'm trying to return a few functions in react but I'm unable to perform as I wanted.

return (
    loadingMessage(),
    errorMessage(),
    loginForm(),
    performRedirect()
    
  )
}

I want to return my functions as above but when try this my app directly calls the last function performRedirect(). I don't know whether am I running this correctly or not.

please find the whole code below.

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

import {signin, authenticate, isAutheticated} from "../auth/helper/index"



const Login = () => {

  const [values, setValues] = useState({
    username: "",
    password: "",
    error: "",
    loading: false,
    didRedirect: false,
  });

  const {username, password, error, loading, didRedirect} = values;
  const {user} =  isAutheticated();

  const handleChange = name => event => {
    setValues({ ...values, error: false, [name]: event.target.value });
  };

  const onSubmit = event => {
    event.preventDefault();
    setValues({ ...values, error: false, loading: true });
    signin({ username, password })
      .then(data => {
        if (data.error) {
          setValues({ ...values, error: data.error, loading: false });
        } else {
          authenticate(data, () => {
            setValues({
              ...values,
              didRedirect: true
            });
          });
        }
      })
      .catch(console.log("signin request failed", error, user));
  };

  const performRedirect = () => {
    //TODO: do a redirect here
    if (didRedirect) {
      if (user && user.role === 1) {
        return <p>redirect to admin</p>;
      } else {
        return <p>redirect to user dashboard</p>;
      }
    }
    if (isAutheticated()) {
      return <Navigate to="/" />;
    }
  };

  const loadingMessage = () => {
    return (
      loading && (
        <div className="alert alert-info">
          <h2>Loading...</h2>
        </div>
      )
    );
  };

  const errorMessage = () => {
    return (
      <div className="row">
        <div className="col-md-6 offset-sm-3 text-left">
          <div
            className="alert alert-danger"
            style={{ display: error ? "" : "none" }}
          >
            {error}
          </div>
        </div>
      </div>
    );
  };

  const loginForm = () => {
    return (
<div className='bg-gray-200'>
      
      <div className="flex items-center h-screen w-full">
        <div className="w-80 bg-white rounded-2xl p-6 m-0 md:max-w-sm md:mx-auto border border-slate-300 shadow-sm">
        <div align='center' className='mt-3 mb-3 items-center content-center'> <img src={require('./../data/logo.jpg')} width="120px"/></div>
        <span className="block w-full text-xl uppercase font-bold mb-4 text-center">Sign in to EMS
  </span>     
          <form className="mb-0" action="/" method="post">
            <div className="mb-4 md:w-full">
              <label for="email" className="block text-xs mb-1 text-left text-gray-500">Username</label>
              <input onChange={handleChange("username")} className="bg-gray-100 w-full border rounded-2xl px-4 py-2 outline-none focus:shadow-outline  text-left text-xs" type="text" name="username" id="username" placeholder="Username" value={username}/>
            </div>
            <div className="mb-6 md:w-full relative">
              <div className='flex w-full'>
              <label for="password" className="block text-xs mb-1  text-center text-gray-500">Password</label>
              <a className="text-xs text-right  text-[#58a6ff] absolute right-0" href="/login">Forgot password?</a></div>
              <input onChange={handleChange("password")} className="bg-gray-100 w-full border rounded-2xl px-4 py-2 outline-none focus:shadow-outline  text-left text-xs" type="password" name="password" id="password" placeholder="Password" value={password}/>
            </div>
            <div className="mb-6 md:w-full relative">
              <div className='flex w-full'>
              <p className="block text-xs mb-1  text-center text-gray-500">{JSON.stringify(values)}</p>
              </div>
            
            <button className="bg-green-500 hover:bg-green-700 shadow-lg text-white uppercase text-sm font-semibold px-4 py-2 rounded-2xl text-center items-center w-full" onClick={onSubmit}>Login</button>
          </form>
      </div>
    </div>
  </div>
    );
  };

  return (
    loadingMessage(),
    errorMessage(),
    loginForm(),
    performRedirect()
    
  )
}

export default Login

Please someone help me on this?

CodePudding user response：

You can modify your return statement with an array value [] like below

return [
    loadingMessage(),
    errorMessage(),
    loginForm(),
    performRedirect()
    ]

Another way, you can render those JSX functions by {} and wrap them into <React.Fragment></React.Fragment> (Or simpler version <></>)

return (
    <React.Fragment>
      {loadingMessage()}
      {errorMessage()}
      {loginForm()}
      {performRedirect()}
    </React.Fragment>)

CodePudding user response：

like this:

return (
  <>
    {loadingMessage()}
    {errorMessage()}
    {loginForm()}
    {performRedirect()}
  </>
)