import React from 'react';
import useState from './App';
import username from './App';
import setUsername from './App';
import setAppState from './App';
function LoginPage(props) {
const onClick = () => {
props.onLogin(setUsername);
}
return (
<div className="chat-login-page-container">
<div className="chat-login-page-controls-container">
<h4>Set your username</h4>
<input type="text"
placeholder="Username"
value={props.username}
username={username}
setUsername={username}
onChange={props.onChange} />
<button type="button" disabled={username.length === 0} onClick='onClick'>Log
in</button>
</div>
</div>
);
}
export default LoginPage;
I keep trying to fix the code with diffrent variables and trying to make it not a value and it just dosnt work. Im at a loss and dont know what to do.
First, you should use object destructuring for props
const {username, onChange, onLogin} = props;
In component "button", the property "onClick" expects a function. With your code onClick='onClick', the property is getting a string and not a function. I'm not sure what the onClick function should do, but it should look somehow like this:
<button type="button" disabled={username.length === 0} onClick={()=>{onLogin(setUsername}}>Log in</button>