Develop Reference

Modal closing right away

I am trying to add a modal to my page but it only stays open for a second and then closes again.
Here is my code:
Home.js
import './Home.css';
import React, {useState} from 'react';
import Modal from "./components/Modal";
function Home() {
const [openModal, setOpenModal] = useState(false);
return (
<div>
{console.log(openModal)}
<div className="App">
<header className="App-header">
<h1 className="App-name">iScore</h1>
</header>
</div>
<div className="Auth-form-container">
<form className="Auth-form">
<div className="Auth-form-content">
<h3 className="Auth-form-title">Sign In</h3>
<div className="form-group-both">
<div className="form-group mt-3">
<label>Email address: </label>
<input
type="email"
className="form-control mt-1"
placeholder="Enter email"
/>
</div>
</div>
<div className="form-group-pass">
<div className="form-group mt-3">
<label>Password: </label>
<input
type="password"
className="form-control mt-1"
placeholder="Enter password"
/>
</div>
</div>
<div className="popup">
<button className="submit"
>
Submit
</button>
</div>
{openModal && <Modal setOpenModals={setOpenModal}/>}
<p className="forgot-password text-right mt-2">
Forgot password?
</p>
<p>
Need an account?
</p>
<button className="sign-up" onClick={() => {
setOpenModal(true);
}}>Register
</button>
</div>
</form>
</div>
</div>
);
}
export default Home;
Modal.js
import "./Modal.css";
import {useState} from "react";
function Modal({ setOpenModals }) {
const handleChange = (event) => {
console.log("Checked: ", event.target.checked)
setAgreement(event.target.checked);
}
return(
<div className="modalBackground">
<div className="modalContainer">
<article>
<button className="Close" onClick={() => setOpenModals(false)}> × </button>
{/*<form>*/}
<div className="Auth-form-content">
<h3 className="Auth-form-title">Register</h3>
<div className="form-group mt-3">
<label>Email address: </label>
<input
type="email"
className="form-control mt-1"
placeholder="Enter email"
/>
</div>
<div className="form-group mt-3">
<label>Email address: </label>
<input
type="name"
className="form-control mt-1"
placeholder="Enter first name"
/>
</div>
<div className="form-group mt-3">
<label>Password: </label>
<input
type="password"
className="form-control mt-1"
placeholder="Enter password"
/>
</div>
<div className="form-group mt-3">
<label>Confirm Password: </label>
<input
type="password"
className="form-control mt-1"
placeholder="Enter password again"
/>
</div>
<div>
<input type="checkbox" name="terms" value="yes" onChange={handleChange}/>
<label htmlFor="terms"> I agree to the terms and conditions</label>
</div>
</div>
{/*</form>*/}
</article>
<footer>
<button disabled={!agreement} onClick={() => {handleSubmit();setOpenModals(false)}}>Register</button>
<button onClick={() => setOpenModals(false)} >Close</button>
</footer>
</div>
</div>
)
}
export default Modal
It seems that as soon as I press Register I can see in the console that openModal is set to True, but then immediately gets set back to false.
I am at a bit of a loss as to what to changes to try and make this work. From my perspective it should be doing it correctly.
Am I missing something here?

The issue is that in Modal.js in <button disabled={!agreement} onClick={() => {handleSubmit();setOpenModals(false)}}>Register</button> you use undeclared
agreement variable that cause Modal.js throw an error and do not render. You need pass agreement as prop or add a new state const [agreement, setAgreement] = useState(false) or remove disabled={!agreement} from a button in Modal.js
Edited
You have a form tag in Home.js and when you click Register button it opens the Modal AND submits a form. By default, a button has an innate type property of submit. When clicked, or activated inside a form, it will cause that form to submit (and trigger a corresponding submit event). This submit event cause Modal to close. Add type="button" to the Register button in Home.js.

at:
<button disabled={!agreement} onClick={() =>
{handleSubmit();setOpenModals(false)}}>Register</button>
You are calling setOpenModals false right after handleSubmit() which is causing immediate close of modal.
You need to close the modal in handleSubmit() function.

onSubmit function is not invoked even after clicking on submit button

I am new to Reactjs. I just wrote this code and onSubmit function is not working. I am not getting if it's fault of register or form handleSubmit.Might be error in this line where the form tag is written.
Please guide and let me know of solutions.react-hook-form version is 7.14
React version is 17.02
FieldArray.js
import React, { Fragment } from "react";
import { useForm } from "react-hook-form";
function FieldArray() {
const { register, handleSubmit } = useForm();
const basicform = (
<div className="card">
<div className="card-header">Basic Information</div>
<div className="card-body">
<div>
<div className="form-group">
<label htmlFor="fullname">Full Name</label>
<input
type="text"
className="form-control"
id="fullname"
name="fullname"
{...register("fullname")}
/>
</div>
<div className="form-group">
<label htmlFor="email">Email address</label>
<input
type="email"
className="form-control"
id="email"
name="email"
{...register("email")}
/>
</div>
<div className="form-group">
<label htmlFor="phone">Phone Number</label>
<input
type="text"
className="form-control"
id="phone"
name="phone"
{...register("phone")}
/>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input
type="password"
className="form-control"
id="password"
name="password"
{...register("password")}
/>
</div>
</div>
</div>
</div>
);
const onSubmit = data => {
console.log('hjhhhh');
console.log(data);
}
return (
<div className="App">
<div className="container py-5">
<form onSubmit={handleSubmit(onSubmit)}>{basicform}</form>
<button className="btn btn-primary" type="submit">Submit</button>
</div>
</div>
);
}
export default FieldArray;

We have to wrap the submit button inside the Form tag
<form onSubmit={handleSubmit(onSubmit)}>
{basicform}
<button className="btn btn-primary" type="submit">
Submit
</button>
</form>
Sandbox - https://codesandbox.io/s/silly-cori-t94eu?file=/src/react-hook-form.jsx

TypeError: Cannot read property 'state' of undefined, even though already binded

im trying to print a state in my reactjs web page, i already bind the function just like the other answer says but it still gave me the same error, here is my code
export class Tambah extends React.Component{
constructor(){
super();
this.add = this.add.bind(this);
}
add(event){
this.setState({company: event.target.value})
}
}
function FormTambah(){
return(
<div className="konten container-sm">
<br></br><br></br>
<div className="tabel card rounded">
<div className="card-body">
<p className="head panel-body">Add User</p>
<br/><br/>
<form>
<p>Email*</p>
<input type="text" value={this.state.company} onChange={this.add} className="email form-control col-sm-6"/>
<br/>
<p>Full Name*</p>
<input type="text" className="email form-control col-sm-7" placeholder="Enter Fullname" onChange={this.FullName}></input>
<br/>
<div className="stat custom-control custom-switch">
<input type="checkbox" className="custom-control-input switch-lg" id="customSwitch1"/>
<label className="custom-control-label" for="customSwitch1">Active Status</label>
</div>
<br/>
<button type="submit" className="submit btn col-sm-1">Save</button>
</form>
</div>
</div>
</div>
)
}
the error happens right here :
<input type="text" value={this.state.company} onChange={this.add} className="email form-control col-sm-6"/>
i already bind the add method after i saw the other question but it still gave me the same error, thanks before, any help will be appreciated

state is available in class components not function components.
also beside react, what you're doing is not legal in JS, you're defining state in one class and try to use it in a different function that is not belong to that class.
what you want to do is move the code in FormTambah function to render function in the class component
export class Tambah extends React.Component{
constructor(){
super();
this.add = this.add.bind(this);
}
add(event){
this.setState({company: event.target.value})
}
render(){
return(
<div className="konten container-sm">
<br></br><br></br>
<div className="tabel card rounded">
<div className="card-body">
<p className="head panel-body">Add User</p>
<br/><br/>
<form>
<p>Email*</p>
<input type="text" value={this.state.company} onChange={this.add} className="email form-control col-sm-6"/>
<br/>
<p>Full Name*</p>
<input type="text" className="email form-control col-sm-7" placeholder="Enter Fullname" onChange={this.FullName}></input>
<br/>
<div className="stat custom-control custom-switch">
<input type="checkbox" className="custom-control-input switch-lg" id="customSwitch1"/>
<label className="custom-control-label" for="customSwitch1">Active Status</label>
</div>
<br/>
<button type="submit" className="submit btn col-sm-1">Save</button>
</form>
</div>
</div>
</div>
)
}
}

Put FormTambah into render:
export class Tambah extends React.Component {
constructor() {
super();
this.add = this.add.bind(this);
}
add(event) {
this.setState({ company: event.target.value });
}
render() {
return (
<div className="konten container-sm">
<br></br>
<br></br>
<div className="tabel card rounded">
<div className="card-body">
<p className="head panel-body">Add User</p>
<br />
<br />
<form>
<p>Email*</p>
<input
type="text"
value={this.state.company}
onChange={this.add}
className="email form-control col-sm-6"
/>
<br />
<p>Full Name*</p>
<input
type="text"
className="email form-control col-sm-7"
placeholder="Enter Fullname"
onChange={this.FullName}
></input>
<br />
<div className="stat custom-control custom-switch">
<input type="checkbox" className="custom-control-input switch-lg" id="customSwitch1" />
<label className="custom-control-label" htmlFor="customSwitch1">
Active Status
</label>
</div>
<br />
<button type="submit" className="submit btn col-sm-1">
Save
</button>
</form>
</div>
</div>
</div>
);
}
}

One input component but different states for each occurrence

I have created a component element. I am using it in a form.
I put the state in the class for the input component and when i do console log and they all seem to share the same state? is this normal. will need to post the values into laravel api and store to mysql next. is the following correct or do i need to create an input component for each field i require. Eg. one for name, one for surname one for telephone one for email etc:
import React from 'react';
import styles from './Input.module.scss';
export class Input extends React.Component {
constructor(props) {
super(props);
this.state = {
inputValue: ''
}
this.onInputChange = this.onInputChange.bind(this);
}
onInputChange(e) {
this.setState({ inputValue: e.target.value });
}
render() {
console.log(this.state.inputValue)
return (
<div className={styles.container}>
<label htmlFor={this.props.id} className={styles.label} > {this.props.label} </label>
<input
id={this.props.id}
className={styles.input}
type="text"
value={this.state.inputValue}
onChange={this.onInputChange}
/>
</div>
);
}
};
reusing same component here:
render() {
return (
<div className={styles.contactForm} >
<form onSubmit={this.onFormSubmit}>
<div className={styles.contactBlock} >
<div className={styles.header} onClick={this.onStepOneClick} >
<BoxHeader title="Step 1: Your Details" />
</div>
<div className={styles[this.state.stepOne]}>
<div>
<Input type="text" label="First Name" id="name" />
<Input type="text" label="Surname" id="surname" />
</div>
<div>
<Input type="email" label="Email Address" id="email" />
</div>
<div className={styles.button} onClick={this.onStepOneClick}>
<Button innerHTML="Next >" />
</div>
</div>
</div>
<div className={styles.contactBlock} >
<div className={styles.header} onClick={this.onStepTwoClick} >
<BoxHeader title="Step 2: More Comments" />
</div>
<div className={styles[this.state.stepTwo]}>
<div>
<Input type="tel" label="Telephone Number" id="tel" />
<Select label="Gender" id="gender" >
<option> Male </option>
<option> Female </option>
<option> Other </option>
</Select>
</div>
<div>
<Date label="Date of Birth" id="dob"/>
</div>
<div className={styles.button} onClick={this.onStepTwoClick}>
<Button innerHTML="Next >" />
</div>
</div>
</div>
<div className={styles.contactBlock} >
<div className={styles.header} onClick={this.onStepThreeClick} >
<BoxHeader title="Step 3: Final Comments" />
</div>
<div className={styles[this.state.stepThree]}>
<div className={styles.textArea}>
<Textarea label="Comments" id="comment" />
</div>
<div className={styles.submit}>
<Submit innerHTML="Next >" />
</div>
</div>
</div>
</form>
</div>
);

Yes, for each field you would need to create a new input. This can be within same or new component whichever you prefer.

how to setup auto-close for popup in framework7 version1

i am using a framwork7 js version 1 for my android mobile app.but there is a problem in login popup, after the successful login the router is working, but the popup is still on the screen, it is not close.
index file popup code
<div class="popup popup-login">
<div class="content-block">
<h4>LOGIN</h4>
<div class="loginform">
<form id="LoginForm" method="post" class="close-panel">
<div id="msgprint" style="display: block;"></div>
<input type="text" name="Username" id="username" value="" class="form_input required" placeholder="Username" />
<input type="password" name="Password" id="password" value="" class="form_input required" placeholder="Password" />
<input type="button" name="submit" class="form_submit" id="submitlogin" onclick="loginHost()" value="SIGN IN" />
</form>
<div class="signup_bottom">
<p>Don't have an account?</p>
SIGN UP
</div>
</div>
<div class="close_popup_button">
<img src="images/icons/black/menu_close.png" alt="" title="" />
</div>
</div>
</div>
javascript for the router page
if(response.data.is_success){
mainView.router.loadPage({url:'user-product.html', ignoreCache:true,
reload:true });
}
if anyone knows the solutions. please answer.