when trying to input text on my fields I get errors like this.state is not a function and val.trim is not a function, any idea what might be the problem?
I get stuck with the input box and the placeholder didn't appear. And after entering username and password, it didn't show logout button. Although I did exactly like in the tutorial
after linking the css it looks close, except there is a small white border all around the body that adds a scroll bar, additionally the font family of Login Form is the browser default, do you know why this is
in this inputfield type='text' placeholder='Username' value={this.state.username ? this.state.username : ' '} why do we need the last ' ' part? I guess, If the username value doesn't exist, then we just can use the empty value this.state.username. It seems the below expression might be the same expression as your expression. value= this.state.username
When I try to see if my Submitbutton is on the page ( so until 3.00minutes ) I got " Element type is invalid : expected a string ( for built in components) or a class/function ( for composite components) but got : undefined...." my code is the same as you Can you help me please ?
Also " you likely forgot to export your components from the file it's defined in, or you might have mixed up default and named imports" Check the re der method of ´App'
sad, it is unusable for beginners... It starts in my environment with an error message and forced me to set each component to "export default NEW [component-name]. Without the "new" I got only an error and the application doesn't rendered. I said to myself, OK... I enter in each component a "new"... As I entered the Submit-Button the application said "Good Night" and nothing works anymore... The only thing what I can do is now to google for another tutorial... By the way... The explanations were good and I understand everything in my opinion but unfortunately something went wrong but I have no clue what...
Beginners should not be learning "full backend" untill they've learnt frontend (eg: react), how APIs work, express, databases and some nodeJS. You should learn those before combining them :) Hope this helps
I figured it out. My mysql query call was missing a parameter. In Router.js (around line 105) I had: db.query('select * from user where id = ? LIMIT 1', (err,data,fields) => { When I needed: db.query('select * from user where id = ? LIMIT 1', cols, (err,data,fields) => { Unlikely this is your problem, but I thought I'd share.
I keep gettin this warning in console: "Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: UserStore@4.loading" So my when i click login button my async doLogin method is never called
in UserStory.js import {runInAction} from 'mobx' and add setLoading = (loading) => { runInAction(() => {this.loading = loading}) } setLoggedIn = (isLoggedIn) => { runInAction(() => {this.isLoggedIn = isLoggedIn}) } setUsername = (username) => { runInAction(() => {this.username = username}) } then whenever you are modifying loading, isLoggedIn, or username from an async function make sure to use those functions
SyntaxError: D:\Work\DAT load board\truckfreight\login-cmpt\src\LoginForm.js: super() is only valid inside a class constructor of a subclass. Maybe a typo in the method name ('constructor') or not extending another class? (10:4) 8 | 9 | construstor(props) { > 10 | super(props); was not able to fix this for quite some time
i get the input field in my browser, but when i start to type it changes to an error: TypeError: this.props.onChange is not a function can anyone help?
![MISSING: SLIM SHADY [Expanded Mourner’s Edition Trailer]](http://i.ytimg.com/vi/xh8qgHrOO1g/mqdefault.jpg)
This is the CSS used:
body, html, #root, .app, .container {
width: 100%;
height: 100%;
}
.container {
font-size: 28px;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #282c34;
}
.loginForm {
box-sizing: border-box;
width: 100%;
max-width: 400px;
padding-left: 20px;
padding-right: 20px;
}
.inputField {
padding-top: 16px;
}
.input {
box-sizing: border-box;
outline: none;
border: solid 2px #1189de;
border-radius: 4px;
color: #292929;
width: 100%;
padding: 12px;
font-size: 14px;
background: rgba(255, 255, 255, 1);
}
.submitButton {
padding-top: 16px;
}
.btn {
width: 100%;
min-width: 280px;
color: #565656;
padding: 12px;
font-size: 14px;
font-weight: bold;
border: solid 2px #1189de;
border-radius: 4px;
background: #fff;
cursor: pointer;
}
Great job! Thank you!
Thanks!
Thank you!
You're welcome!
Great tutorial thank you so much! Can I use a rails backend for this? or does it have to be js?
amazing
why its showing ×
TypeError: this.props.onClick is not a function ?? can any one help??
nice thx bro
You're welcome!
when trying to input text on my fields I get errors like this.state is not a function and val.trim is not a function, any idea what might be the problem?
Can you just share code link
Or any github
You don't learn anything
@@munkkipoika8737 the irony hahaha
SyntaxError: D:\project\frontend\src\LoginForms.js: Unexpected token, expected ";" (45:8)
})
try {
45| > Let res = await fetch('/login', {
^
method: 'post',
headers: {
'Accept': 'application/json',
why i am getting this error ???
also getting this error; have you figured it out?
@@asher4818 yess do not use capital 'L' for let
@@chinmayteni1728 still getting the same error. Is your coding running fine?
@@asher4818 whats is the error?
@@chinmayteni1728 ./src/App.js
SyntaxError: C:\Users\asher\OneDrive\Desktop\SYSKAMVP2021\khaya\frontend\src\App.js: Unexpected token (43:7)
I get stuck with the input box and the placeholder didn't appear. And after entering username and password, it didn't show logout button. Although I did exactly like in the tutorial
use observer instead of "Observer"
any 1 help me pls I suck at this code... data did not save in session in other words cant show the logout page
after linking the css it looks close, except there is a small white border all around the body that adds a scroll bar, additionally the font family of Login Form is the browser default, do you know why this is
i add some padding-bottom in .container, fix for me
in this inputfield
type='text'
placeholder='Username'
value={this.state.username ? this.state.username : ' '}
why do we need the last ' ' part?
I guess, If the username value doesn't exist, then we just can use the empty value this.state.username.
It seems the below expression might be the same expression as your expression.
value= this.state.username
You need the empty string to have a value there. Otherwise instead of a value/String it would be undefined.
When I try to see if my Submitbutton is on the page ( so until 3.00minutes )
I got " Element type is invalid : expected a string ( for built in components) or a class/function ( for composite components) but got : undefined...."
my code is the same as you
Can you help me please ?
Also " you likely forgot to export your components from the file it's defined in, or you might have mixed up default and named imports"
Check the re der method of ´App'
sad, it is unusable for beginners... It starts in my environment with an error message and forced me to set each component to "export default NEW [component-name]. Without the "new" I got only an error and the application doesn't rendered.
I said to myself, OK... I enter in each component a "new"...
As I entered the Submit-Button the application said "Good Night" and nothing works anymore...
The only thing what I can do is now to google for another tutorial...
By the way... The explanations were good and I understand everything in my opinion but unfortunately something went wrong but I have no clue what...
Beginners should not be learning "full backend" untill they've learnt frontend (eg: react), how APIs work, express, databases and some nodeJS. You should learn those before combining them :)
Hope this helps
I am having issues with the mobex UserStore not keeping the state following a refresh. Any idea what the issue may be?
Me too! I'm struggling to fix this.
I figured it out. My mysql query call was missing a parameter.
In Router.js (around line 105) I had:
db.query('select * from user where id = ? LIMIT 1', (err,data,fields) => {
When I needed:
db.query('select * from user where id = ? LIMIT 1', cols, (err,data,fields) => {
Unlikely this is your problem, but I thought I'd share.
I keep gettin this warning in console:
"Since strict-mode is enabled, changing (observed) observable values without using an action is not allowed. Tried to modify: UserStore@4.loading"
So my when i click login button my async doLogin method is never called
can anyone help?
@@tomwallace6250 In index.js remove
in UserStory.js
import {runInAction} from 'mobx'
and add
setLoading = (loading) => {
runInAction(() => {this.loading = loading})
}
setLoggedIn = (isLoggedIn) => {
runInAction(() => {this.isLoggedIn = isLoggedIn})
}
setUsername = (username) => {
runInAction(() => {this.username = username})
}
then whenever you are modifying loading, isLoggedIn, or username from an async function make sure to use those functions
Thank you very much ! men can you share the code link please?
POST localhost:3000/login 404 (Not Found) ??????????
I had this
SyntaxError: D:\Work\DAT load board\truckfreight\login-cmpt\src\LoginForm.js: super() is only valid inside a class constructor of a subclass. Maybe a typo in the method name ('constructor') or not extending another class? (10:4)
8 |
9 | construstor(props) {
> 10 | super(props);
was not able to fix this for quite some time
There is a typo in line 9. Should be "constructor(props)"
i get the input field in my browser, but when i start to type it changes to an error: TypeError: this.props.onChange is not a function
can anyone help?
I have the same problem and don't know how to fix it
make sure you are passing onChange prop from the parent component who is using this input field.