DEV Community

Grzesiek Kozdroj
Grzesiek Kozdroj

Posted on

2 1

Undefined variable in react, what I don't get?

It will say that name and are undefined but I don't know why and how to fix it.

My code:

Top comments (1)

Collapse
 
grzesiekkozdroj profile image
Grzesiek Kozdroj

const phoneExp = /\(?![0])|[0])[0-9](?[0-9])?[0-9]*$/;

const formValid = formErrors => {
let valid = true;
Object.values(formErrors).forEach(val => {
val.length > 0 && (valid = false);
});

return valid

}

class App extends React.Component {
constructor(props) {
super(props)
this.state={
nameInput: null,
phoneInput: null,
formErrors:{
nameInput:"",
phoneInput:""
}
}
}
handleSubmit = e =>{
e.preventDefault();
if(formValid(this.state.formErrors)){
console.log(
--SUBMITTED--
--nameInput:${this.state.nameInput}
--phoneInput:${this.state.phoneInput}
);
}else{
console.log(error)
}
}

handleChange = e => {
    e.preventDefault();
    const {name, value} = e.taret;console.log(name,value)
    let formErrors = this.state.formErrors;

    switch(name){
        case 'nameInput':
            formErrors.nameInput = value.length < 3 && value.length > 0 ? "name too short" : "please enter a name";
        break;
        case 'phoneInput':
            formErrors.phoneInput = phoneExp.test(value) && value.length > 0 ? "please enter a phone number" : "bad phone number";
        break;
        default:
            break;
    }
}

render() {
    return (
        <>
            <h1>here we go again</h1>
            <form onSubmit={this.handleSubmit}>
                <div className="nameInput">
                    <label htmlFor="nameInput" noValidate >Name:</label>
                    <input 
                        type="text" 
                        noValidate 
                        name="nameInput"
                        onChange={this.handleChange}
                    />
                </div>
                <div className="phoneInput">
                    <label htmlFor="phoneInput" noValidate >Phone:</label>
                    <input 
                        type="text" 
                        noValidate 
                        name="phoneInput"
                        onChange={this.handleChange}
                    />
                </div>
                <div className="saveNumbers">
                    <button type="submit">save</button>
                </div>
            </form>
        </>
    )

}

}

document.addEventListener('DOMContentLoaded', function () {
ReactDOM.render(
,
document.getElementById('app')
);
});

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

Rather than just generating snippets, our agents understand your entire project context, can make decisions, use tools, and carry out tasks autonomously.

Read full post

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay