We Keep Coding

Having little complication while using useLocation() [duplicate]

This question already has answers here:
How to pass data from a page to another page using react router
(5 answers)
Closed 27 days ago.
I do not now why the same code was working yesterday fine but today not working. I understand why the error happens, but have no idea how to fix it. I am trying to redirect the user to profile component using Navigate comp with a state pass. This works fine, but when a user manually clicks on profile I get the error because I am trying to access the state value that does not exist. Since the state value is defined after only redirecting. So is there any help to avoid or fix this error?
react-refresh-runtime.development.js:315 Uncaught TypeError:
Cannot read properties of null (reading 'mes')
Login.jsx
import { useState } from "react";
import { Link, Navigate, Outlet } from "react-router-dom";
import axios from "axios";
import { FaEye, FaEyeSlash } from "react-icons/fa";
function Login() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [inputType, setInputType] = useState("password");
const [icon, setIcon] = useState(<FaEye />);
const [success, setSuccess] = useState("");
const [result, setResult] = useState(false);
function handleToggle(e) {
if (inputType === "password") {
setInputType("text");
setIcon(FaEyeSlash);
} else {
setInputType("password");
setIcon(FaEye);
}
}
function handleSubmit(e) {
e.preventDefault();
const user = { email, password };
console.log(`email: ${email}, password: ${password}`);
axios
.post("http://localhost:5000/user/login", user)
.then((res) =>{
setResult(true);
setSuccess(`welcome ${res.data.user} you are successfully Logged in!`);
console.log(result);
}
)
.catch((err) => {
//console.log(`ERROR is ${err}`);
setResult(false);
console.log(result);
setSuccess("Incorrect password or email");
});
}
if(result){
console.log(result);
return <Navigate to="/profile" state={{mes: success }} />
}
return (
<form onSubmit={handleSubmit}>
<div className="text-center text-lg text-red-500 font-semibold">{success}</div>
<div className="h-auto w-5/12 border mx-auto rounded-2xl mt-3 ">
<div className="h-2 bg-indigo-400 rounded-t-2xl mb-5 "></div>
<div className="font-bold text-2xl text-center">Sign In</div>
<div className="px-16">
<div className="mt-5 ">
<label htmlFor="email" className="block font-semibold ">
Email address
</label>
<input
type="email"
className="border h-5 w-full px-3 py-5 rounded-md focus:outline-2 focus:outline-blue-600"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="Enter email"
id="email"
required
/>
</div>
<div className="relative ">
<label
htmlFor="pass"
className="block font-semibold mt-5"
>
Password
</label>
<input
type={inputType}
className="border h-5 w-full px-3 py-5 rounded-md focus:outline-2 focus:outline-blue-600"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Enter password"
id="pass"
required
/>
<span className="absolute top-9 right-6" onClick={handleToggle}>
{icon}
</span>
</div>
<div className="">
<button
type="submit"
className="mt-5 text-white bg-blue-600 border h-10 w-full py-2 rounded-md"
>
Submit
</button>
</div>
<div className="flex justify-around">
<p className="mb-5 mt-3 text-left">
New here?
<Link to="/sign-up" className="text-blue-600">
Register
</Link>
</p>
<p className="mb-5 mt-3 text-right ">
Forgot
<Link to="/password-reset" className="text-blue-600">
password?
</Link>
</p>
</div>
</div>
</div>
</form>
);
}
export default Login;
Profile.jsx
import { useState } from "react";
import { useLocation } from "react-router-dom";
function Profile() {
const location = useLocation();
const msg = location.state.mes;
const [success, setSuccess] = useState(msg);
const [cancel, setCancel] = useState("X");
const [name, setName] = useState(
"h-10 flex justify-around items-center bg-green-200 text-black"
);
function handleClick() {
setSuccess("");
setCancel("");
setName("");
}
return (
<>
<div className={name}>
{success}
<button onClick={handleClick}>{cancel}</button>
</div>
profile
</>
);
}
export default Profile;
I have not tried anything, but I will try to see the docs on this.

Simply use Optional Chaining to check if location.state.mes exists. If location.state or location.state.mes doesn't exist then default to an empty string in the useState() call.
const msg = location.state?.mes; // msg will either be undefined or the message value
const [success, setSuccess] = useState(msg == undefined ? '' : msg);

I'm getting a unauthorised message when i try to login at the client side

I'm working on a Auth with MERN , at the client side i'm using contextAPI ,useReducerhook to manage the user.
I have also created a custom hook ( useLogin ) for handling the login criteria as shown below .It takes the userCredentials whoch is a object of (email password) from the login form .I have also incorporated the reacy-hook form to handle validation of the input fields
import axios from "axios";
import { BASE_API_URL } from "../utils/BaseUrl";
import { useAuthContext } from "./useAuthContext";
export const useLogin = () => {
const [isError, setIsError] = useState(null)
const [isLoading, setIsLoading] = useState(false)
const [IsSuccess, setIsSucces] = useState(false)
const { dispatch } = useAuthContext()
const loginUser = async (userDetails) => {
setIsError(null)
setIsLoading(true)
try {
const response = await axios.post(`${BASE_API_URL}/api/auth/login`, {
userDetails: userDetails
})
//get json data
const jsonData = await response.json()
//if there is a error in the response
if (!response.ok) {
setIsLoading(false)
setIsError(jsonData.error)
}
//if it works correctly
if (response.ok) {
//save user to local storage
localStorage.setItem("userData", JSON.stringify(jsonData));
localStorage.setItem("accessToken", jsonData.data?.accessToken)
//update the auth context
dispatch({ type: "LOGIN", paylaod: jsonData })
setIsLoading(false)
setIsSucces(true)
}
} catch (err) {
setIsError(err.message)
setIsLoading(false)
}
}
return { isError, isLoading, IsSuccess, loginUser }
}
Then i re use it at my login page as shown here
import ScaleLoader from "react-spinners/ScaleLoader";
import Logo from "../../assets/images/Logo.png";
import Footer from "../Footer/index";
import { Link } from "react-router-dom";
import { useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";
import Input from "#material-ui/core/Input";
import Swal from "sweetalert2";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { faEye, faEyeSlash } from "#fortawesome/free-solid-svg-icons";
import { useLogin } from "../../hooks/useLogin";
const Login = () => {
const [userDetails, setUserDetails] = useState("");
const [passwordShown, setPasswordShown] = useState(false);
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const navigate = useNavigate();
const { loginUser } = useLogin()
// Password toggle handler
const togglePassword = () => {
setPasswordShown(!passwordShown);
};
//handleSubmit
const onSubmit = async () => {
await loginUser(userDetails)
navigate("/user/dashboard");
setUserDetails('')
};
return (
<>
{/* <div className="d-flex justify-content-center loader">
<ScaleLoader
className="d-flex justify-content-center"
color="#FFC247"
speedMultiplier={4}
/>
</div> */}
<div className="login-page">
<div className="container">
<div className="row">
<div className="col-lg-6 offset-lg-3 col-md-12 offset-md-1 col-sm-12 offset-sm-1 col-xs-6 offset-xs-3">
<div className="login-form">
<div className="login-form-header d-flex flex-column justify-content-center flex-column align-items-center">
<img src={Logo} alt="" />
<h4>We missed you , glad to see you back</h4>
</div>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-group">
<label htmlFor="email1">Email address</label>
<input
type="email"
className={`form-control py-2 my-2 ${errors.email ? "input-error" : ""
}`}
id="email"
name="email"
placeholder="Enter email"
{...register("email", {
required: "Email is required",
pattern: {
value: /^[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
message: "Invalid email address",
},
})}
/>
{errors.email && (
<span className="errorMsg">{errors.email.message}</span>
)}
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<div className="input-group">
<Input
type={passwordShown ? "text" : "password"}
className="form-control py-2 my-2"
id="password"
name="password"
placeholder="Enter password"
{...register("password", {
required: "Password is required",
minLength: {
value: 8,
message: "Password must be at least 8 characters",
},
pattern: {
value:
/^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!##$%^&*])/,
message:
"Password must contain at least one lowercase letter, one uppercase letter, one number and one special character",
},
})}
/>
<span
style={{ height: "50px", marginTop: "8px" }}
className="input-group-text"
onClick={togglePassword}
>
{passwordShown ? (
<FontAwesomeIcon icon={faEyeSlash} />
) : (
<FontAwesomeIcon icon={faEye} />
)}
</span>
</div>
{errors.password && (
<span className="errorMsg">
{errors.password.message}
</span>
)}
</div>
<div className="submit-button d-flex align-items-center justify-content-between mt-5">
<button className="btn-home px-5 rounded">Login</button>
<div className="forget-password">
<Link
to="/user/forgetpassword"
className="text-decoration-none text-link"
>
Forget my password
</Link>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div className="footer-home">
<Footer />
</div>
</div>
</>
);
};
export default Login;

Make div with react components as children disappear if I click outside of it

I want to make a form that disappears if I click outside of it.
Form Component:
const CreateTaskPopup = (props) => {
const ref = query(collection(db, "tasks"));
const mutation = useFirestoreCollectionMutation(ref);
useEffect(() => {
const closeTaskPopup = (event) => {
if (event.target.id != "addForm") {
props.setTrigger(false)
}
}
document.addEventListener('click', closeTaskPopup);
return () => document.removeEventListener('click', closeTaskPopup)
}, [])
return (props.trigger) ? (
<>
<div className="bg-darkishGrey my-4 p-1 mx-3 ml-16 cursor-pointer block"
id="addForm">
<div className="flex justify-between">
<div className="flex break-all items-center ">
<Image src={fileIcon} className="w-6 mx-2"/>
<div>
<Formik
initialValues={{
taskName: "",
taskIsDone: false,
parentId: props.parentId ? props.parentId : "",
hasChildren: false,
}}
onSubmit={(values) => {
mutation.mutate(values);
props.setTrigger(false);
}}
>
<Form>
<div className="">
<TextInput
placeholder="Type a name"
name="taskName"
type="text"
/>
</div>
</Form>
</Formik>
</div>
</div>
<div className="flex items-center">
</div>
</div>
</div>
</>
) : null
}
export default CreateTaskPopup
Text Input Component:
import { useField } from "formik";
const TextInput = ({ label, ...props}) => {
const [field, meta] = useField(props);
return (
<div>
<label id="addForm" className="text-lightestGrey text-xl block"
htmlFor={props.id || props.name}>
{label}
</label>
<input id="addForm" className="bg-darkishGrey text-xl text-almostWhite my-2
outline-none w-10/12 rounded-sm p-1 mx-3" {...field} {...props} />
{meta.touched && meta.error ? <div>{meta.error}</div>: null}
</div>
);
};
export default TextInput;
I tried giving an id to the elements inside it but it's not the best solution as it has components from the Formik library to which I can't assign an id. I don't know what would be the best solution for this problem.

The placeholder is not showing up at first instance because of i put value={newTodo} and i know that in first instance "newTodo" is empty. How to fix?

The "newTodo" state variable is empty in the first instance when i load the page, that's why the placeholder is not displaying, it act as if there is zero value in newTodo variable so placeholder is not showing up in the first instance, but after i enter a text then placeholder shows up.
import React, {useState} from 'react'
const ToDo = () => {
const [todo, setTodo] = useState([]);
const [newTodo, setNewTodo] = useState(" ");
let globalID = 0;
const handleSubmit = (e) => {
e.preventDefault();
setNewTodo("");
setTodo((oldTodo) => {
return [...oldTodo, newTodo]
});
}
const handleInput = (e) => {
setNewTodo(e.target.value);
}
return (
<>
<h1 className="header">Building To Do App</h1>
<section className='flex justify-center mt-8'>
<div className='border border-indigo-800 w-1/2 flex flex-col text-center h-96'>
<h2 className=' h-16 flex justify-center items-center bg-pink-600 text-white' >To-Do List</h2>
<form onSubmit={handleSubmit} className="mt-6">
<input placeholder='Add a Item' type="text" onChange={handleInput} name="todo" id="todo" value={newTodo} className='w-1/2 h-12 rounded-sm border-b-4 border-indigo-500 text-xl bg-gray-300 focus:outline-none text-black' />
<button className='bg-pink-600 rounded-full w-12 h-12 mx-4 hover:bg-green-700'>+</button>
</form>
<ol className='todoList'>
{todo.map((items) => {
return <li key={globalID++} >{items}</li>
} )}
</ol>
</div>
</section>
</>
)
}
export default ToDo

You set the default value newTodo value " " that's issue !
const [newTodo, setNewTodo] = useState();
Remove " " from useState(); solve the issue !

how to pass props from a component

how can i pass props from a select component to my app js
here my code:
const HandleSelect = ()=> {
const [selectedOption, setSelectedOption] = useState();
return(
<div className="App">
<Select
defaultValue={selectedOption}
onChange={setSelectedOption}
options={options}
/>
</div>
)
}
export default HandleSelect;
i've tried with
const Select = (props) => {
const {
defaultValue, onChange, options
} = props
console.log(onChange);
return (
<div>
</div>
)
}
export default Select
but in the app they return undefined when i try with console.log()
sorry for my english, i'm French.
Thanks for your help.

Destructure your props like this
const Select = ({defaultValue, onChange, options}) => {
return (
<div>
<p>{defaultValue}</p>
<p>{onChange}</p>
<p>{options}</p>
</div>
)
}
export default Select
or you could also do it this way
const Select = (props) => {
return (
<div>
<p>{props.defaultValue}</p>
<p>{props.onChange}</p>
<p>{props.options}</p>
</div>
)
}
export default Select

Here my app initial where i want to use the select, it's a lot of code, sorry for that !
import React, { useState, useEffect } from 'react';
import '../App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { FiPlusCircle } from 'react-icons/fi';
import { InputGroup } from 'react-bootstrap';
import { FormControl } from 'react-bootstrap';
import { Button } from 'react-bootstrap';
import { useForm } from 'react-hook-form';
import ImageUpload from 'image-upload-react';
import { doc, setDoc, getDoc } from 'firebase/firestore';
import { decode as base64_decode, encode as base64_encode } from 'base-64';
import Select from './select';
// Initialize Cloud Firestore through Firebase
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
const object1 = { title: 'Entrecôte', category: 'Viande', describe: 'Ici la description' };
const firebaseApp = initializeApp({
//my config
});
const db = getFirestore();
const Initial = (props) => {
const [ data, setData ] = useState(object1);
const [ loadata, setLoadata ] = useState();
const [ imageSrc, setImageSrc ] = useState(); // form image source
const [ encoded, setEncoded ] = useState(); // Value
const [ title, setTitle ] = useState(''); // title
const [ category, setCat ] = useState(''); // category
const [ describe, setDesc ] = useState(''); // description
const { register, handleSubmit, formState: { errors } } = useForm();
const onSubmit = (data) => setData(data);
// set url data
const handleImageSelect = (e) => {
setImageSrc(URL.createObjectURL(e.target.files[0]));
};
useEffect(() => {
if (data) {
//form only
setTitle(data.title);
setCat(data.category);
setDesc(data.describe);
addTodo(title, category, describe, encoded); // great !
}
}, []);
// write values to firebase database
const addTodo = async () => {
const response = await fetch(imageSrc);
const blob = await response.blob();
var reader = new FileReader();
reader.onload = () => {
setEncoded(reader.result);
};
reader.readAsDataURL(blob);
if (encoded && data) {
await setDoc(doc(db, 'User', 'user000'), {
category: category,
title: title,
describe: describe,
image: encoded
});
}
};
function getScrollHeight(elm) {
var savedValue = elm.value;
elm.value = '';
elm._baseScrollHeight = elm.scrollHeight;
elm.value = savedValue;
}
function onExpandableTextareaInput({ target: elm }) {
// make sure the input event originated from a textarea and it's desired to be auto-expandable
if (!elm.classList.contains('autoExpand') || !elm.nodeName === 'TEXTAREA') return;
var minRows = elm.getAttribute('data-min-rows') | 0,
rows;
!elm._baseScrollHeight && getScrollHeight(elm);
elm.rows = minRows;
rows = Math.ceil((elm.scrollHeight - elm._baseScrollHeight) / 16);
elm.rows = minRows + rows;
}
// global delegated event listener
document.addEventListener('input', onExpandableTextareaInput);
// Ici je veux retourner le produit (lecture)
const getUser = async () => {
const list = [];
const docRef = doc(db, 'User', 'user000');
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
list.push(docSnap.data());
const newlist = list[0];
setLoadata(newlist);
} else {
console.log('No such document!');
}
};
useEffect(() => {
getUser();
}, []);
// console.log('propsinou', props);
return (
<div className="container-fluid css-selector m-0 p-0" style={{ height: '100vh' }}>
<div className="row m-0 p-0">
<div className="col-12 row m-0">
{/* column card */}
<div className="col-md-1 cardColor mt-5 text-center text-white size">
<h4 className="mt-3 mb-4"> Bienvenue </h4>
<div className="round">
<FiPlusCircle size={40} />
</div>
<p>Ajouter menu</p>
</div>
<div className="col-11 row space m-0 justify-content-center">
<h1 className="m-0 text-white text-center mt-5">Bienvenue sur votre Dashboard</h1>
<div className="col-10 row m-0">
<h4 className="m-0 text-white p-3">Étape 1 : ajouter du contenu </h4>
{/* First card */}
<div className="col-3 text-center card">
{loadata ? (
<div class="container">
<h3 className="m-0 text-success p-3">Titre</h3>
<InputGroup className="mb-3">
<InputGroup.Text id="basic-addon1">📌</InputGroup.Text>
<FormControl
placeholder={loadata.title}
aria-label="Titre du menu"
aria-describedby="basic-addon1"
{...register('title')} // onChange={e=>
// this.setState({ val: e.target.value })}
/>
</InputGroup>
<h3 className="m-0 text-success">Catégorie</h3>
<InputGroup className="mb-3 mt-3">
<InputGroup.Text id="basic-addon1">📜</InputGroup.Text>
<FormControl
placeholder={loadata.category}
aria-label="Username"
aria-describedby="basic-addon1"
{...register('category')} // onChange={e=>
// this.setState({ val: e.target.value })}
/>
</InputGroup>
</div>
) : (
<div class="container">
<h3 className="m-0 text-success p-3">Titre</h3>
<InputGroup className="mb-3">
<InputGroup.Text id="basic-addon1">📌</InputGroup.Text>
<FormControl
placeholder="titrent"
aria-label="Titre du menu"
aria-describedby="basic-addon1"
{...register('title')} // onChange={e=>
// this.setState({ val: e.target.value })}
/>
</InputGroup>
<h3 className="m-0 text-success">Catégorie</h3>
<InputGroup className="mb-3 mt-3">
<InputGroup.Text id="basic-addon1">📜</InputGroup.Text>
<FormControl
placeholder="Username"
aria-label="Username"
aria-describedby="basic-addon1"
{...register('category')} // onChange={e=>
// this.setState({ val: e.target.value })}
/>
</InputGroup>
</div>
)}
</div>
<div className="col-3 card offset-1">
<div className="container">
<h3 className="m-0 text-success p-3 text-center">Description</h3>
{loadata ? (
<textarea
className="autoExpand"
rows="3"
data-min-rows="3"
placeholder={loadata.describe}
{...register('describe')}
autoFocus
/>
) : (
<textarea
className="autoExpand"
rows="3"
data-min-rows="3"
placeholder={'Entrez la description'}
{...register('describe')}
autoFocus
/>
)}
</div>
</div>
<div className="col-3 offset-1 p-absolute">
<ImageUpload
className="border-r"
handleImageSelect={handleImageSelect}
imageSrc={imageSrc}
setImageSrc={setImageSrc}
style={{
width: '100%',
height: '100%',
background: 'gold'
}}
/>
</div>
</div>
<div className="col-10 row m-0">
<div className="col-3"></div>
<h4 className="m-0 text-white p-3 mt-5">Étape 2 : Choisir la catégorie & valider </h4>
{/* First card */}
<div className="col-3 text-center card">
<div class="container">
<h3 className="m-0 text-success p-3">Catégorie</h3>
<Select />
</div>
</div>
<div className="col-3 offset-1 text-center card">
<div class="container">
<h3 className="m-0 text-success p-3">Valider</h3>
{/* <Button /> */}
<Button variant="success" onClick={handleSubmit(onSubmit)}>
Envoyer les données
</Button>{' '}
</div>
</div>
</div>
</div>
{/* Boutton Select*/}
</div>
</div>
</div>
);
};
export default Initial;