Hi everyone , I working on Login Register system, i use Context for state management. I use cookie for this system and i want this cookie functions in a cookieContext, i can run before merge on main but i cant run now. I dont understand everything look fine please help me i will lose my mine
My Context Codes :
import { createContext } from 'react';
import cookie from 'js-cookie';
const CookieContext = createContext(null);
export const CookieProvider = ({ children }) => {
const setUserCookie = (name, token) => {
cookie.set(name, `Bearer ${token}`);
};
const isCookie = (name) => {
const mycookie = cookie.get(name);
if (!mycookie) return 0;
return 1;
};
const values = {
setUserCookie,
isCookie,
};
return <CookieContext.Provider value={values}>{children}</CookieContext.Provider>;
};
export default CookieContext;
I impelement on index.js so my index codes :
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.min.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { CookieProvider } from './Contexts/CookieContext/cookieContext';
ReactDOM.render(
<BrowserRouter>
<React.StrictMode>
<CookieProvider>
<App />
</CookieProvider>
</React.StrictMode>
<App />
</BrowserRouter>,
document.getElementById('root'),
);
My main Component App:
import './App.css';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
import HomePage from './Views/HomePage';
import Header from './Components/Header';
import Footer from './Components/Footer';
import BlogDetail from './Views/BlogDetailPage';
import Login from './Views/Login';
import Register from './Views/Register';
import { Switch, Route } from 'react-router-dom';
function App() {
return (
<>
<Header />
<Switch>
<Route path="/" exact component={HomePage} />
<Route path="/article/:id" exact component={BlogDetail} />
<Route path="/login" component={Login} />
<Route path="/register" component={Register} />
</Switch>
<Footer />
</>
);
}
export default App;
As i said at the beggining i working on login, register page Login and Register page like View component and they are contain Form component so this error coming from form components.Register or Login page cant open.
My Register Form Component:
import { useState, useContext } from 'react';
import './styles.css';
import axios from 'axios';
import CookieContext from '../../../Contexts/CookieContext/cookieContext';
import { Redirect } from 'react-router-dom';
function RegisterForm() {
const { setUserCookie, isCookie } = useContext(CookieContext);
const [errorMessage, setErrorMessage] = useState('');
const [userDataRegister, setUserDataRegister] = useState({
name: '',
surname: '',
username: '',
password: '',
confirmPassword: '',
phoneNumber: '',
email: '',
gender: '',
});
const [file, setFile] = useState();
const result = isCookie('user');
if (result === 1) {
return <Redirect to="/" />;
}
// const url = `${process.env.REACT_APP_CLIENT_URL}/`
const handleSubmit = async (e) => {
setErrorMessage('');
e.preventDefault();
if (
userDataRegister.name === '' ||
userDataRegister.surname === '' ||
userDataRegister.password === '' ||
userDataRegister.confirmPassword === '' ||
userDataRegister.phoneNumber === '' ||
userDataRegister.email === '' ||
userDataRegister.gender === ''
) {
setErrorMessage('* ile işaretli alanlar boş bırakılamaz');
}
const { name, surname, username, password, phoneNumber, email, gender } = userDataRegister;
const data = new FormData();
data.append('name', name);
data.append('surname', surname);
data.append('username', username);
data.append('password', password);
data.append('phoneNumber', phoneNumber);
data.append('email', email);
data.append('gender', gender);
data.append('profilPicture', file);
const config = {
headers: { 'content-type': 'multipart/form-data' },
};
const response = await axios.post('posturl', data, config);
if (response.data.code === 11000)
setErrorMessage('Bu kullanıcı zaten mevcut,üyeyseniz lütfen giriş yapınız.');
console.log(response);
if (response.data.token) {
setUserCookie('user', response.data.token);
window.location.href = '/';
}
};
const handleChange = (e) => {
setUserDataRegister({ ...userDataRegister, ...{ [e.target.name]: e.target.value } });
};
const handleFile = (e) => {
setUserDataRegister({ ...userDataRegister, ...{ [e.target.name]: e.target.files[0] } });
setFile(e.target.files[0]);
};
return (
<form className="w-100 p-4 border shadow" onSubmit={handleSubmit}>
<div className="form-group">
<label htmlFor="name">
Adınız <span className="text-danger">*</span>
</label>
<input name="name" className="form-control" onChange={handleChange} />
</div>
<div className="form-group">
<label htmlFor="surname">
Soyadınız <span className="text-danger">*</span>
</label>
<input name="surname" className="form-control" onChange={handleChange} />
</div>
<div className="form-group">
<label htmlFor="username">
Kullanıcı adınız <span className="text-danger">*</span>
</label>
<input name="username" className="form-control" onChange={handleChange} />
</div>
<div className="form-group">
<label htmlFor="password" className="form-control-label">
Şifreniz <span className="text-danger">*</span>
</label>
<input name="password" type="password" className="form-control" onChange={handleChange} />
</div>
<div className="form-group">
<label htmlFor="confirmPassword" className="form-control-label">
Tekrar Şifreniz <span className="text-danger">*</span>
</label>
<input
name="confirmPassword"
type="password"
className="form-control"
onChange={handleChange}
/>
</div>
<div className="form-group">
<label htmlFor="phoneNumber" className="form-control-label">
Telefon Numaranız<span className="text-danger">*</span>
</label>
<input name="phoneNumber" className="form-control" onChange={handleChange} />
</div>
<div className="form-group">
<label htmlFor="email" className="form-control-label">
E-posta Adresiniz<span className="text-danger">*</span>
</label>
<input name="email" className="form-control" onChange={handleChange} />
</div>
<div className="form-group">
<label htmlFor="gender" className="form-control-label">
Cinsiyet <span className="text-danger">*</span>{' '}
</label>
<select className="form-control" name="gender" onChange={handleChange}>
<option defaultValue="selected">Cinsiyet Seçiniz</option>
<option defaultValue="Woman">Kadın</option>
<option defaultValue="Man">Erkek</option>
</select>
</div>
<div className="form-group">
<label htmlFor="profilPicture" className="form-control-label">
Profil Fotoğrafı
</label>
<input
type="file"
name="profilPicture"
className="form-control-file"
id="profilPicture"
onChange={handleFile}
/>
</div>
<button type="submit" className="btn btn-block btnBg text-white my-2">
Kayıt Ol
</button>
{errorMessage !== '' && <small className="text-danger lead">{errorMessage}</small>}
<p className="text-danger lead" style={{ fontSize: '12px' }}>
Error
</p>
</form>
);
}
export default RegisterForm;
I don't see much overtly incorrect with your code other than I think you just need to provide a better initial context value instead of null.
const CookieContext = createContext({
isCookie: false,
setUserCookie: () => {},
});
Updating Context from a Nested Component
It is often necessary to update the context from a component that is nested somewhere deeply in the component tree. In this case you can pass a function down through the context to allow consumers to update the context:
theme-context.js
// Make sure the shape of the default value passed to // createContext matches the shape that the consumers expect! export const ThemeContext = React.createContext({ theme: themes.dark, toggleTheme: () => {}, });