Can't pass function from useState to component-CodePudding

I have the main App.js component, I made something like a database in it. I want the object of the authorized user to be inside App.js, I created a useState in which I want to store this user.

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;

In order to put the user there, I need him to first log in, for this I have the AuthPage.js component, in which Login.js is located, through which I, in turn, am going to pass the object with the authorized user directly to the state App. js, for this I pass with props my setActiveUser function from App.js first to AuthPage.js and then from AuthPage.js to 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>
    );
}

In Login.js, I first check the forms, and then I try to transfer the finished object to the state using setActiveUser(obj)

Login.js

import React, {useState} from 'react';

import './Login.css';

function Login({users, setActiveUser}){        


            console.log(typeof(setActiveUser));
            setActiveUser({name: 'da'});
}

I cut out most of the code because it just checks the forms, and this is the final result I should have had, but something went wrong: Uncaught TypeError: setActiveUser is not a function. Checked my object with the user for data type using typeof, it turned out object

I started checking the data type of the setActiveUser function itself, got object, checked the destructuring, everything seems to be normal, tried to destructure setActiveUser from App.js in Auth.page when receiving arguments and then pass:

export default function AuthPage(users, {setActiveUser}){}

as a result, in Login.js through typeof (setActiveUser) I generally get indefined

Can anyone tell me where I messed up? I really can't figure out what's wrong

CodePudding user response：

You need to use curly brackets {}

When you use <AuthPage users = {users} setActiveUser = {setActiveUser}/>, users and setActiveUser are passed to AuthPage as props.

export default function AuthPage({ users, setActiveUser }){
    return (
        <div className='auth-block'>
            <Login users = {users} setActiveUser = {setActiveUser}/>
        </div>
    );
}