We Keep Coding

Reactjs onSubmit is not working with form tag

I am working on Reactjs and i am using nextjs framework,Right now i am trying to validate form using reactjs but i am not getting "alert" after click on submit button,How can i do this ? I tried with following code but not working
import Head from 'next/head'
import Image from 'next/image'
import { Inter } from '#next/font/google'
import styles from '#/styles/Home.module.css'
const inter = Inter({ subsets: ['latin'] })
import { useForm } from "react-hook-form";
export default function Home() {
const { handleSubmit } = useForm();
const checkauth = (data:any) => {
alert("Hello world");
};
return (
<div className="container">
<div className="screen">
<div className="screen__content">
<form className="login" onSubmit={handleSubmit(checkauth)}>
<div className="login__field">
<i className="login__icon fas fa-user" />
<input
type="text"
className="login__input"
placeholder="User name / Email"
/>
</div>
<div className="login__field">
<i className="login__icon fas fa-lock" />
<input
type="password"
className="login__input"
placeholder="Password"
/>
</div>
<button className="button login__submit">
<span className="button__text">Log In Now</span>
<i className="button__icon fas fa-chevron-right" />
</button>
</form>
</div>
</div>
</div>
);
}

Try using event.preventDefault() in your checkAuth function.
Also button should have type=“submit”.

I tried to simulate this on react with register and it's working. Find code below -
import React from 'react';
import { useForm } from 'react-hook-form';
export default function TempForm() {
const { handleSubmit, register } = useForm();
const checkauth = (data) => {
console.log(data);
alert('Hello world');
};
return (
<div className='container'>
<div className='screen'>
<div className='screen__content'>
<form className='login' onSubmit={handleSubmit(checkauth)}>
<div className='login__field'>
<i className='login__icon fas fa-user' />
<input
type='text'
className='login__input'
placeholder='User name / Email'
{...register('username')}
/>
</div>
<div className='login__field'>
<i className='login__icon fas fa-lock' />
<input
type='password'
className='login__input'
placeholder='Password'
{...register('password')}
/>
</div>
<button className='button login__submit'>
<span className='button__text'>Log In Now</span>
<i className='button__icon fas fa-chevron-right' />
</button>
</form>
</div>
</div>
</div>
);
}

Error while moving on to other page in react

Currently am writing a full stack website, which uses Nodejs and Mongodb for Backend and reactjs for Frontend. I am having a problem in react. As I am new to developing, my explanation of the problem won't be accurate, forgive me for this.
Coming to the error, when am at my home page, it gets every picture and all the stuff perfectly, but when I go to profile page, the pictures wont get updated and they wont appear. I don't know why, please help me....
This is my feed page
import "./feed.css";
import Post from "../post/Post";
import Share from "../share/Share";
import { useState } from "react";
import { useEffect } from "react";
import axios from 'axios';
export default function Feed({username}) {
const [posts,setPosts]=useState([]);
const [texts,setTexts]=useState([]);
useEffect(()=>{
const fetchPosts=async ()=>{
const res=username?
await axios.get("posts/profile/"+username):
await axios.get("posts/timeline/63c29c2fe9a410383d4bcb98");
setPosts(res.data);
};
fetchPosts();
},[]);
return (
<div className="feed">
<div className="feedWrapper">
<Share/>
{posts.map((p)=>(
<Post key={p._id} post={p}/>
))}
</div>
</div>
)
}
This is my Profile.jsx
import "./profile.css"
import Topbar from "../../components/topbar/Topbar";
import Sidebar from "../../components/sidebar/Sidebar";
import Feed from "../../components/feed/Feed";
import Rightbar from "../../components/rightbar/Rightbar";
import { useEffect } from "react";
import axios from "axios";
import { useState } from "react";
export default function Profile() {
const [user,setUser]= useState({});
useEffect(()=>{
const fetchUser=async ()=>{
const res=await axios.get(`/users/?username=Bannu`);
setUser(res.data);
};
fetchUser();
},[]);
return (
<>
<Topbar/>
<div className="profile">
<Sidebar/>
<div className="profileRight">
<div className="profileRightTop">
<div className="profileCover">
<img className="profileCoverImg" src={user.coverPicture||"assets/person/noCover.jpeg"} alt="" />
<img className="profileUserImg"src="assets/person/7.jpeg" alt="" />
</div>
<div className="profileInfo">
<h4 className="profileInfoName">{user.username}</h4>
<span className="profileInfoDesc">{user.desc}</span>
</div>
</div>
<div className="profileRightBottom">
<Feed username='Bannu'/>
<Rightbar user={user}/>
</div>
</div>
</div>
</>
)
}
This is Post.jsx
import "./post.css";
import { MoreVert } from "#material-ui/icons";
import axios from 'axios';
import { useState,useEffect } from "react";
import {format} from 'timeago.js';
import { Link } from "react-router-dom";
export default function Post(post) {
const [like,setLike]=useState(post.post.likes.length);
const [isLiked,setIsLiked]=useState(false);
const [user,setUser]=useState({});
const likeHandler=()=>{
setLike(isLiked?like-1:like+1);
setIsLiked(!isLiked);
};
useEffect(()=>{
const fetchUser=async ()=>{
const res=await axios.get(`/users?userId=${post.post.userId}`);
setUser(res.data);
};
fetchUser();
},[post.post.userId]);
return (
<div className="post">
<div className="postWrapper">
<div className="postTop">
<div className="postTopLeft">
<Link to={`profile/${user.username}`}>
<img className="postProfileImg"src={user.profilePicture||"assets/person/noAvatar.jpeg"} alt="" />
</Link>
<span className="postUsername">{user.username}</span>
<span className="postDate">{format(post.post.createdAt)}</span>
</div>
<div className="postTopRight">
<MoreVert/>
</div>
</div>
<div className="postCenter">
<span className="postText">{post?.desc}</span>
<img className="postImg" src={post.post.img} alt="" />
</div>
<div className="postBottom">
<div className="postBottomLeft">
<img className="likeIcon" src="assets/like.png" onClick={likeHandler} alt="" />
<img className="likeIcon"src="assets/heart.jpeg" onClick={likeHandler} alt="" />
<span className="postLikeCounter">{like} people like it</span>
</div>
<div className="postBottomRight">
<span className="postCommentText">{post.comment} comments</span>
</div>
</div>
</div>
</div>
)
}
This is share.jsx
import "./share.css"
import {PermMedia,Label, Room, EmojiEmotions} from '#material-ui/icons'
export default function Share() {
return (
<div className="share">
<div className="shareWrapper">
<div className="shareTop">
<img className="shareProfileImg" src="assets/person/1.png" alt="" />
<input type="text"
placeholder="What's in your mind?"
className="shareInput"
/>
</div>
<hr className="shareHr" />
<div className="shareBottom">
<div className="shareOptions">
<div className="shareOption">
<PermMedia htmlColor="tomato" className="shareIcon"/>
<span className="shareOptionText">Photo or Video</span>
</div>
<div className="shareOption">
<Label htmlColor="blue"className="shareIcon"/>
<span className="shareOptionText">Tag</span>
</div>
<div className="shareOption">
<Room htmlColor="green" className="shareIcon"/>
<span className="shareOptionText">Location</span>
</div>
<div className="shareOption">
<EmojiEmotions htmlColor="goldenrod" className="shareIcon"/>
<span className="shareOptionText">Feeling</span>
</div>
</div>
<button className="shareButton">Share</button>
</div>
</div>
</div>
)
}
And these are the pictures of home and particular profile pages Home Particular profile page. You can observe that in the profile page the image of a post is missing.
Help me ....

Error in showing my modal in React component

I'm building an app with React and I'm trying to implement a modal appearing after error occurring.
This is a simply login card with input boxes and I do a post request to login or sign-up new users.
If there's any error in my form or users already exists I want to popup a modal with error messages like the following.
I can't understand why it isn't showing. The error is ok and the backdrop is visible. Any help is appreciated.
There's my code:
This is the JSX code:
import { useHttpClient } from '../hooks/http-hook';
const { isLoading, error, sendRequest, clearError } = useHttpClient();
...
return (
<React.Fragment>
<ErrorModal error={error} onClear={clearError} />
<div className="container">
{isLoading && <LoadingSpinner asOverlay />}
<div className="card card-container">
<img id="profile-img" className="profile-img-card" alt="Login Avatar" src={require("../../assets/images/avatar.png")} />
<p id="profile-name" className="profile-name-card"></p>
<form className="form-signin" onSubmit={loginSubmitHandler}>
<span id="reauth-email" className="reauth-email"></span>
{!isLoginMode && (
<Input
element="input"
id="username"
type="text"
title="Username"
placeholder="USERNAME"
validators={[VALIDATOR_REQUIRE()]}
errorText="Required."
onInput={inputHandler}
/>
)}
<Input
element="input"
id="email"
type="text"
title="EMAIL"
placeholder="EMAIL"
validators={[VALIDATOR_EMAIL()]}
errorText="Invalid email address."
onInput={inputHandler}
/>
<Input
element="input"
id="password"
type="password"
title="PASSWORD"
placeholder="PASSWORD"
validators={[VALIDATOR_MINLENGTH(5)]}
errorText="Your password must have at least 5 characters."
onInput={inputHandler}
/>
<Button type="submit" disabled={!formState.isValid}>
{isLoginMode ? 'LOGIN' : 'SIGNUP'}
</Button>
</form>
<Button inverse onClick={switchModeHandler}>
SWITCH TO {isLoginMode ? 'SIGNUP' : 'LOGIN'}
</Button>
</div>
</div>
</React.Fragment>
)
This is my Modal.js
import React from 'react';
import ReactDOM from 'react-dom';
import { CSSTransition } from 'react-transition-group';
import Backdrop from './Backdrop';
import './Modal.css';
const ModalOverlay = props => {
const content = (
<div className={`modal ${props.className}`} style={props.style}>
<header className={`modal__header ${props.headerClass}`}>
<h2>{props.header}</h2>
</header>
<form
onSubmit={
props.onSubmit ? props.onSubmit : event => event.preventDefault()
}
>
<div className={`modal__content ${props.contentClass}`}>
{props.children}
</div>
<footer className={`modal__footer ${props.footerClass}`}>
{props.footer}
</footer>
</form>
</div>
);
return ReactDOM.createPortal(content, document.getElementById('modal-hook'));
};
const Modal = props => {
return (
<React.Fragment>
{props.show && <Backdrop onClick={props.onCancel} />}
<CSSTransition
in={props.show}
mountOnEnter
unmountOnExit
timeout={200}
classNames="modal"
>
<ModalOverlay {...props} />
</CSSTransition>
</React.Fragment>
);
};
export default Modal;
And this my ErrorModal.js
import React from 'react';
import Modal from './Modal';
import Button from '../formElements/Button';
const ErrorModal = props => {
return (
<Modal
onCancel={props.onClear}
header="An Error Occurred!"
show={!!props.error}
footer={<Button onClick={props.onClear}>Okay</Button>}
>
<p>{props.error}</p>
</Modal>
);
};
export default ErrorModal;

It was simply my bootstrap.css to create a mess.....
<link rel="stylesheet" href="%PUBLIC_URL%/stylesheets/bootstrap/bootstrap.css">
I simply renamed the modal class in custom_modal

React Redirect when clicking button

I´m learning in react and practicing making a simple application to login and view messages sent.
I´ve read a lot about routing, links and redirect, but i couldn´t translate to my app.
I Would like to click in the "Login" button of a component and redirect to another component.
Here i have the principal component : App.js
import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
class Login extends Component {
state = {
loggedIn:false
};
loginHandle = () => {
this.setState({loggedIn:true});
}
render(){
return (
<div className="container d-flex h-100">
<div className="row align-self-center w-100">
<div className="col-6 mx-auto">
<div className="jumbotron">
<form name="form1">
<fieldset>
<legend>Chat App</legend>
<label for="UserName" className="col-form-label">Username</label>
<input type="text" className="form-control col-12" id="UserName"></input>
<label for="Password" className="col-form-label">Password</label>
<input type="text" className="form-control col-12" id="Password"></input>
<button type="button" value="log in" className="btn btn-secondary" onClick={this.loginHandle}>Login</button>
</fieldset>
</form>
<div style={{float:"right"}}>
<div className="login-help ">
Register - Forgot Password
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Login;
I wrapped all the Links in a Navigation component
So, when i route /, it goes to the Login component
class Login extends Component {
state = {
loggedIn:false
};
loginHandle = () => {
this.setState({loggedIn:true});
}
render(){
return (
<div className="container d-flex h-100">
<div className="row align-self-center w-100">
<div className="col-6 mx-auto">
<div className="jumbotron">
<form name="form1">
<fieldset>
<legend>Chat App</legend>
<label for="UserName" className="col-form-label">Username</label>
<input type="text" className="form-control col-12" id="UserName"></input>
<label for="Password" className="col-form-label">Password</label>
<input type="text" className="form-control col-12" id="Password"></input>
<button type="button" value="log in" className="btn btn-secondary" onClick={this.loginHandle}>Login</button>
</fieldset>
</form>
<div style={{float:"right"}}>
<div className="login-help ">
Register - Forgot Password
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Login;
Do i have to import routes and redirect in the Login component, or i have to mange all from the App component?
Sorry about this mess, but i don´t know how to continue
Thanks a lot. I really apreciatted in advance.

The simplest way for navigating to another route.
For example you can wrap your Forgot password like following:
<Link to="/forgotRoute">Forgot password?</Link>
Don't forget to add /forgotRoute handling into your Navigator config (where you routed / to your Login component).
Hope it helps.

The correct way for what you want i think it is. So follow me..
You need to use router. In my case i'm using react-router-dom.
First router App component, by default page its renders DefaultPage components and in DefaultPage when component mounted you can render client anywhere.
index.js looks like:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { Route, Switch } from 'react-router-dom';
class DefaultPage extends Component {
state = {
autorized: false,
mounted: false,
}
componentDidMount = () => {
const { autorized } = this.state;
if (!autorized) {
this.props.history.push('/login');
return;
}
this.setState({
mounted: true,
});
}
render = () => {
if (!this.state.mounted) {
return (
<React.Fragment>
<p>Waiting...</p>
</React.Fragment>
)
}
return (
<React.Fragment>
<p>Hello...</p>
</React.Fragment>
)
}
}
class Login extends React.Component {
handleLogin = () => {
if (contidion) {
this.props.history.push('/');
}
}
render = () {
return (
<button onClick={this.handleLogin}>Click to login</button>
)
}
}
class App extends React.Component {
render = () {
return (
<Switch>
<Route exact path="/" component={DefaultPage} />
<Route path="/login" component={Login} />
<Route component={DefaultPage} />
</Switch>
)
}
}
ReactDOM.render(
<BrowserRouter >
<App />
</BrowserRouter>,
document.getElementById("root")
);

Redux Form Simple Fields

I have a simple Redux Form and tried to follow the example given here https://redux-form.com/6.2.0/docs/GettingStarted.md/ here is my code
user-form.js
import React from 'react';
import {Field, reduxForm} from 'redux-form';
class UserForm extends React.Component {
/**
* User Form goes here...
*/
render() {
const { handleSubmit } = this.props;
return (
<form role="form" onSubmit={handleSubmit}>
<div className="box-body">
<div className="form-group">
<label htmlFor="name">Full Name</label>
<Field
name="name"
component="input"
type="text"
className="form-control"
placeholder="Enter full name..."/>
</div>
<div className="form-group">
<label htmlFor="email">Email address</label>
<Field
name="email"
type="email"
component="input"
className="form-control"
placeholder="Enter email"/>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<Field
name="password"
type="password"
component="input"
className="form-control"
placeholder="Password"/>
</div>
</div>
<div className="box-footer">
{/* <button type="submit" className="btn btn-primary">Save</button> */}
<button type="submit" className="btn btn-primary" value="Save">Save</button>
</div>
</form>
);
}
}
UserForm = reduxForm({
form: 'user'
})(UserForm);
export default UserForm;
Above Form is rendered by a UserPage Container
user-page.js
import React from 'react';
import Page from '../../page';
import UserForm from '../components/user-form';
import UserList from '../components/user-list';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import UserAction from '../actions';
import {showLoading, hideLoading} from 'react-redux-loading-bar';
/**
* We might want to create an Abstract Form component to
* include all common form features.
*/
class UserPage extends Page {
handleUserSubmit(values) {
console.log(values);
}
/**
* Content is loaded into page
*/
content() {
return (
<div className="row">
{/* left column */}
<div className="col-md-6">
{/* general form elements */}
<div className="box box-primary">
<div className="box-header with-border">
<h3 className="box-title">New User</h3>
</div>
{/* /.box-header */}
<UserForm onSubmit={this.handleUserSubmit}/>
</div>
{/* /.box */}
</div>
{/*/.col (left) */}
{/* right column */}
<div className="col-md-6">
{/* UserList made of <User /> */}
{this.userList()}
{/* /.box */}
</div>
{/*/.col (right) */}
</div>
);
}
}
const mapStateToProps = (state) => ({ //this gets state from reducer and maps to props
users: state.userList.users,
fetched: state.userList.fetched,
error: state.userList.error
});
const mapDispatchToProps = (dispatch) => ({
actions: bindActionCreators({
dispatchShowLoading: showLoading,
dispatchHideLoading: hideLoading,
dispatchUserList: UserAction.userList
}, dispatch)
});
export default connect(mapStateToProps, mapDispatchToProps)(UserPage);
My Form successfully renders and I can see all the actions being dispatched inside the Redux Dev tools window, but when I try to enter text into the fields it won't do any thing, however the actions are dispatched like I said.
Sorry if this sounds a very basic question. I am relatively new to React and Redux and for that matter to Javascript.

In order to make redux form work, its reducer needs to be included and I forgot to include one, this fixed my issue.
import { reducer as formReducer } from 'redux-form';
const allReducers = combineReducers({
form: formReducer,
});
export default allReducers;