Есть у меня главный компонент App.js, сделал в нём что то типа бд. Хочу что бы объект авторизированного пользователя находился внутри App.js, создал useState, в котором хочу хранить этого пользователя.
import React, {useState} from 'react';
import './App.css';
import AuthPage from './components/AuthPage/AuthPage';
function App() {
const [activeUser, setActiveUser] = useState();
const [users, setUsers] = useState(
[
{
name: 'Andrey',
email: '[email protected]',
password: 'qwerty'
},
{
name: 'Roma',
email: '[email protected]',
password: '123'
},
{
name: 'Ilya',
email: '[email protected]',
password: 'zxc'
}
]
)
return (
<>
<AuthPage users = {users} setActiveUser = {setActiveUser}/>
</>
);
}
export default App;
Для того что бы поместить туда пользователя мне надо что бы он сначала авторизировался, для этого у меня есть компонент AuthPage.js, в котором находится Login.js, через который я в свою очередь и собираюсь передавать объект с авторизированным пользователем прямиком в state App.js, для этого передаю с помощью props мою функцию setActiveUser из App.js сначала в AuthPage.js а потом из AuthPage.js в Login.js
AuthPage.js
import React from 'react';
import Login from './Login';
import './AuthPage.css'
export default function AuthPage(users, setActiveUser){
return (
<div className='auth-block'>
<Login users = {users} setActiveUser = {setActiveUser}/>
</div>
);
}
В Login.js я сначала проверяю формы, а потом уже пытаюсь готовый объект передать в state с помощью setActiveUser(obj)
Login.js
import React, {useState} from 'react';
import './Login.css';
function Login({users, setActiveUser}){
setStatus(<p className='succes'>Пользователь успешно авторизирован</p>);
console.log(typeof(setActiveUser));
setActiveUser({name: 'da'});
}
Большую часть кода вырезал ибо там идёт просто проверка форм, а это уже конечный результат у меня должен был быть, но что то пошло не так: Uncaught TypeError: setActiveUser is not a function
.
Проверил мой объект с пользователем на тип данных с помощью typeof, получился object
Начал проверять тип данных самой функций setActiveUser, получил object
, проверил деструктуризацию,вроде всё в норме, попробовал в Auth.page
при приёме аргументов тоже деструктуризировать setActiveUser из App.js и потом передать:
export default function AuthPage(users, {setActiveUser}){}
по итогу в Login.js через typeof(setActiveUser) вообще получаю indefined
Может кто подсказать где я намудрил? Вообще понять не могу в чём дело