I'm using bootstrap-validate for my forms, and I'm running into a really weird problem. If I try to use setIsValidEmail in the callback then whenever I type [some-text]#[some-text].com . I can't type anything pass the 'c' in 'com'. It works fine if I leave the callback and just remove setIsValidEmail.
Repo: https://github.com/mlelien/testtest
import React, { useState } from 'react'
import * as bootstrapValidate from 'bootstrap-validate'
window.bootstrapValidate = bootstrapValidate
const SignUp2 = () => {
const [email, setEmail] = useState('')
const [isValidEmail, setIsValidEmail] = useState(false)
const onEmailChange = (e) => {
const newEmail = e.target.value
setEmail(newEmail)
bootstrapValidate('#form-email', 'email:Invalid email', (isValid) => {
setIsValidEmail(isValid)
})
}
return (
<div className="container">
<h3>SIGN UP</h3>
<form>
<div className="form-group">
<label htmlFor="form-email">
Email address
<input
type="email"
className="form-control"
id='form-email'
aria-describedby='enter email'
placeholder='Enter email'
value={email}
onChange={onEmailChange}
/>
</label>
</div>
</form>
</div>
)
}
export default SignUp2
Related
I'am new using reactjs and looks like I am following the old tutorial with old version of react router. So the objectives is when I want to edit the user detail, the form must be filled with data of previous user before update. I've already comunicate with the backend using axios and it worked fine, but the problem is in "id = props.match.params.id". and here is my code:
UserEdit.tsx
import axios from "axios";
import React, { SyntheticEvent, useEffect, useState } from "react";
import { Navigate } from "react-router-dom";
import Wrapper from "../../components/Wrapper";
import { Role } from "../../models/role";
const UserEdit = (props: any) => {
const [first_name, setFirstName] = useState('');
const [last_name, setLastName] = useState('');
const [email, setEmail] = useState('');
const [role_id, setRoleId] = useState('');
const [roles, setRoles] = useState([]);
const [redirect, setRedirect] = useState(false);
let id: number;
useEffect(() => {
(
async () => {
const response = await axios.get('roles');
setRoles(response.data);
id = props.match.params.id;
const {data} = await axios.get(`users/${id}`);
setFirstName(data.first_name);
setLastName(data.last_name);
setEmail(data.email);
setRoleId(data.role_id);
}
)()
}, []);
const submit = async (e: SyntheticEvent) => {
e.preventDefault();
await axios.put('users', {
first_name,
last_name,
email,
role_id
});
setRedirect(true)
}
if(redirect) {
return <Navigate to="/users"/>
}
return (
<Wrapper>
<form onSubmit={submit}>
<h1 className="h3 mb-3 fw-normal">Edit user</h1>
<div className="form-floating">
<input className="form-control" placeholder="First Name" defaultValue={first_name} onChange={e => setFirstName(e.target.value)} required/>
<label htmlFor="floatingInput">First Name</label>
</div>
<div className="form-floating">
<input className="form-control" placeholder="Last Name" defaultValue={last_name} onChange={e => setLastName(e.target.value)} required/>
<label htmlFor="floatingInput">Last Name</label>
</div>
<div className="form-floating">
<input type="email" className="form-control" placeholder="Email Address" defaultValue={email} onChange={e => setEmail(e.target.value)} required/>
<label htmlFor="floatingInput">Email Address</label>
</div>
<div className="form-floating">
<select className="form-control" id="floatingRole" placeholder="Role" value={role_id} onChange={e => setRoleId(e.target.value)} required>
{roles.map((r: Role) => {
return (
<option key={r.id} value={r.id}>{r.name}</option>
)
})}
</select>
<label htmlFor="floatingRole">Role</label>
</div>
<button className="w-100 btn btn-lg btn-primary" type="submit">Save</button>
</form>
</Wrapper>
);
};
export default UserEdit;
As you can see in this image below, the data isn't show up and get the error message like this
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'params')
I really appreciate if anyone wants to help me solve this problem so I can learn further. Thankyou
In react-router-dom#6 there are no longer "route props", i.e. no location, history (well, now navigate), and no match.
Use the useParams hook to access the route path parameters.
...
import { Navigate, useParams } from "react-router-dom";
...
const UserEdit = (props: any) => {
const { id } = useParams();
...
useEffect(() => {
(async () => {
const response = await axios.get('roles');
setRoles(response.data);
const { data } = await axios.get(`users/${id}`);
setFirstName(data.first_name);
setLastName(data.last_name);
setEmail(data.email);
setRoleId(data.role_id);
})();
}, []); // <-- add `id` to dependency array if you need to be responsive
...
return (
...
);
};
It seems like your params not pass correctly .
Maybe you need to get URL parameters by using useParams
like document (https://v5.reactrouter.com/web/example/url-params)
, or check the Router component path format is correct in your React Router version .
In React Router ^v5.3.0 :
<Route path="users/:id/edit" />
import React, { useState } from 'react'
const FormBox = () => {
const [name, setName] = useState("")
const [textArea, setTextArea] = useState('')
const handleSumbit = (e) =>{
e.preventDefault();
console.log(name)
}
return (
<form onSubmit={handleSumbit}>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<textarea value={textArea} onChange={handleSumbit}></textarea>
<input type="submit" />
</form>
)
}
When the text box is displayed I cannot type in it.
What am I doing wrong...?
import React, { useState } from 'react'
const FormBox = () => {
const [name, setName] = useState('')
const [textArea, setTextArea] = useState('')
const handleSumbit = (e) =>{
e.preventDefault();
console.log(name)
}
return (
<form onSubmit={handleSumbit}>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<textarea value={textArea} onChange={(e) => setTextArea(e.target.value)}></textarea>
<input type="submit" />
</form>
)
}
The textarea is a controlled input - if you are going to tie the value of the <textarea> to the textArea state variable, you need to update that state variable whenever the user changes the input.
Shouldn't the onChange={handleSumbit} of the textarea be
onChange={(e) => setTextArea(e.target.value)}
import React, { useState } from 'react'
const FormBox = () => {
const [name, setName] = useState("")
const [textArea, setTextArea] = useState('')
const handleSumbit = (e) =>{
e.preventDefault();
console.log(name)
}
return (
<form onSubmit={handleSumbit}>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setTextArea(e.target.value)}
/>
</label>
<textarea value={textArea} onChange={handleSumbit}></textarea>
<input type="submit" />
</form>
)
}
Firstly
You implicitly set the value of your text area using the textArea variable which has an initial state of "" (an empty string).
React automatically refreshes the real DOM from the virtual DOM after every change in state. But the value of your textArea variable doesn't change with this event, so you have to update the state when a value is entered like this:
onChange={(e) => setTextArea(e.target.value)}
After reading your code, I guessed what you wanted to achieve is to prevent the submit button from submitting the form by default and instead logs the name on the console.
I believe this is the code you wanted to achieve:
import React, { useState } from 'react'
const FormBox = () => {
const [name, setName] = useState('')
const [textArea, setTextArea] = useState('')
const handleSumbit = (e) =>{
e.preventDefault();
console.log(name)
}
return (
<form onSubmit={handleSumbit}>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<textarea value={textArea} onChange={(e) => setTextArea(e.target.value)}></textarea>
<input type="submit" />
</form>
)
You can't type here the event not written by you properly, so, you state textarea not updated yet. just needed to change one as a similar name textbox. just replace
<textarea value={textArea} onChange={handleSumbit}></textarea>
to
<textarea value={textArea} onChange={(e) => setTextArea(e.target.value)}></textarea>
Full code here edited,
import React, { useState } from 'react'
const FormBox = () => {
const [name, setName] = useState('')
const [textArea, setTextArea] = useState('')
const handleSumbit = (e) =>{
e.preventDefault();
// console here form data
}
return (
<form onSubmit={(e)=>handleSumbit(e)}>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<textarea value={textArea} onChange={(e) => setTextArea(e.target.value)}></textarea>
<input type="submit" value="Submit now!" />
</form>
)
I Hope, work fine using this code
Thanks
I'm fetching content from external api using axios and react hooks.
Currently, I'm rendering {renderedResults} without any button. But I want to add submit button and then only render the results when someone clicks on it.
How to implement it in this scenario?
I tried official doc..but no success...
import React, { useEffect, useState } from "react";
import axios from "axios";
import "./Search.css";
const Search = () => {
const [vpincode, setvPincode] = useState("");
const [vdate, setvDate] = useState("");
const [results, setResults] = useState([]);
useEffect(() => {
const search = async () => {
const { data } = await axios.get("https://api", {
params: {
pincode: vpincode,
date: vdate,
},
});
setResults(data.sessions);
};
search();
}, [vpincode, vdate]);
const renderedResults = results.map((result) => {
return (
<div>
{result.name}
{result.address}
</div>
);
});
return (
<div className="container">
<div className="w-25 mb-3">
<label className="form-label ">Enter Pincode:</label>
<input
value={vpincode}
type="text"
className="form-control"
placeholder="Pincode"
onChange={(e) => setvPincode(e.target.value)}
></input>
</div>
<div className="w-25 mb-3">
<label className="form-label">Date:</label>
<input
value={vdate}
type="text"
className="form-control"
placeholder="Date"
onChange={(e) => setvDate(e.target.value)}
></input>
</div>
{renderedResults}
</div>
);
};
export default Search;
Code not tested, but you can do something like this...
import React, { useEffect, useState } from "react";
import axios from "axios";
import "./Search.css";
const Search = () => {
const [vpincode, setvPincode] = useState("");
const [vdate, setvDate] = useState("");
const [results, setResults] = useState([]);
const fetchApiContent = async (_) => {
const { data } = await axios.get("https://api", {
params: {
pincode: vpincode,
date: vdate,
},
});
setResults(data.sessions);
}
const renderedResults = results.map((result) => {
return (
<div>
{result.name}
{result.address}
</div>
);
});
return (
<div className="container">
<div className="w-25 mb-3">
<label className="form-label ">Enter Pincode:</label>
<input
value={vpincode}
type="text"
className="form-control"
placeholder="Pincode"
onChange={(e) => setvPincode(e.target.value)}
></input>
</div>
<div className="w-25 mb-3">
<label className="form-label">Date:</label>
<input
value={vdate}
type="text"
className="form-control"
placeholder="Date"
onChange={(e) => setvDate(e.target.value)}
></input>
</div>
{renderedResults}
<button onClick={fetchApiContent}>Fetch API Content</button>
</div>
);
};
export default Search;
What I am trying to do is when the user click the edit button, this will send him to a new page where he can modify the info he already entered. The problem I am facing is that the new page is not showing the data previously entered, so that the user can make his changes. Also, the submit button to send those changes is not working. These are the errors I am getting: src\components\RestaurantList.jsx
Line 25:8: React Hook useEffect has a missing dependency: 'setRestaurants'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Line 31:19: 'response' is assigned a value but never used no-unused-vars
src\components\UpdateRestaurant.jsx
Line 9:12: 'restaurants' is assigned a value but never used no-unused-vars
Line 38:8: React Hook useEffect has a missing dependency: 'code'. Either include it or remove the dependency array react-hooks/exhaustive-deps
My code for the component I am working on:
import React, {useState, useContext, useEffect} from 'react';
import { useHistory, useParams } from 'react-router-dom';
import RestaurantFinder from '../apis/RestaurantFinder';
import { RestaurantsContext } from '../context/RestaurantsContext';
const UpdateRestaurant = (props) => {
const {code} = useParams();
const {restaurants} = useContext(RestaurantsContext);
let history = useHistory();
const [name, setName] = useState("");
const [value, setValue] = useState ("");
const [strain, setStrain] = useState ("");
const [weight, setWeight] = useState ("");
const [authors, setAuthors] = useState ("");
const [number, setNumber] = useState ("");
const [page, setPage] = useState ("");
const [date, setDate] = useState ("");
useEffect(() => {
const fetchData = async () => {
const response = await RestaurantFinder.get(`/${code}`);
console.log(response.data.data);
setName(response.data.data.restaurant.name);
setValue(response.data.data.restaurant.value);
setStrain(response.data.data.restaurant.strain);
setWeight(response.data.data.restaurant.weight);
setAuthors(response.data.data.restaurant.authors);
setNumber(response.data.data.restaurant.number);
setPage(response.data.data.restaurant.page);
setDate(response.data.data.restaurant.date);
};
fetchData();
}, []);
const handleSubmit = async(e) => {
e.preventDefault();
const updatedRestaurant = await RestaurantFinder.put(`/${code}`, {
name,
value,
strain,
weight,
authors,
number,
page,
date,
});
console.log(updatedRestaurant);
history.push("/");
};
return (
<div>
<form action="">
<div className="form-group">
<label htmlFor="name">Name</label>
<input value={name} onChange={(e) => setName(e.target.value)} code="name" className="form-control" type="text" />
</div>
<div className="form-group">
<label htmlFor="Value">Value</label>
<input value={value} onChange={(e) => setValue(e.target.value)} code="value" className="form-control" type="float" />
</div>
<div className="form-group">
<label htmlFor="Strain">Strain</label>
<input value={strain} onChange={(e) => setStrain(e.target.value)} code="strain" className="form-control" type="text" />
</div>
<div className="form-group">
<label htmlFor="Weight">Weight</label>
<input value={weight} onChange={(e) => setWeight(e.target.value)} code="weight" className="form-control" type="float" />
</div>
<div className="form-group">
<label htmlFor="Author">Author</label>
<input value={authors} onChange={(e) => setAuthors(e.target.value)} code="authors" className="form-control" type="text" />
</div>
<div className="form-group">
<label htmlFor="Number">Number</label>
<input value={number} onChange={(e) => setNumber(e.target.value)} code="number" className="form-control" type="number" />
</div>
<div className="form-group">
<label htmlFor="Page">Page</label>
<input value={page} onChange={(e) => setPage(e.target.value)} code="page" className="form-control" type="number" />
</div>
<div className="form-group">
<label htmlFor="date">Date</label>
<input value={date} onChange={(e) => setDate(e.target.value)} code="date" className="form-control" type="number" />
</div>
<button onClick={handleSubmit} type="submit" className="btn btn-primary">Submit</button>
</form>
</div>
)
}
export default UpdateRestaurant
for reusable code, it may be best to just do something like this.
This is probably not the answer, but I hope it helps you find out the answer.
const [data, setData ] = useState({restraunt.loaded:"false"});
useEffect(() => {
const fetch = async () => {
const response = await RestaurantFinder.get(`/${code}`);
console.log(response.data.data);
setData({...response.data.data, restraunt.loaded:"true"});
};
fetch();
},[Data.restraunt.loaded])
const {name, value , page, loaded } = Data.restaurant;
return (
<div><h1>{loaded}</h1>
</div>
)
If it shows loaded as false then you know it is because of the data not loading.
I have 2 components, the problem is that on the first submit click i cant setUser(), (although addUser arguments are giving the correct values) it keeps the original state '', '', but if i click it again it change correctly. I don't know what I'm doing wrong, its my first question sorry if its poorly formatted.
import React, { useState, useEffect } from "react";
import "./notes.css";
import UserNameMailForm from "./userNameMailForm";
const NoteApp = props => {
const [user, setUser] = useState({
userName: "",
email: ""
});
const addUser = (userName, email) => {
const newUser = { userName, email };
setUser(newUser);
console.log(user);
console.log(userName, email);
};
return (
<div className="container p-0">
<div className="screen pt-2">
<p>Users</p>
</div>
<UserNameMailForm addUser={addUser} />
</div>
);
};
export default NoteApp;
The second component is this one:
import React, { useState, useEffect } from "react";
const UserNameMailForm = ({ addUser }) => {
const [userName, setUsername] = useState("");
const [email, setEmail] = useState("");
useEffect(() => {}, []);
const handleSubmit = e => {
e.preventDefault();
addUser(userName, email);
};
return (
<form onSubmit={handleSubmit} className="form-group">
<input
type="text"
className="form-control"
placeholder="User name"
value={userName}
onChange={e => setUsername(e.currentTarget.value)}
/>
<input
type="text"
className="form-control"
placeholder="email"
value={email}
onChange={e => setEmail(e.currentTarget.value)}
/>
<button type="submit" className="btn btn-outline-danger">
Add
</button>
</form>
);
};
export default UserNameMailForm;
You code is working fine, as this example demonstrates:
const { useState } = React;
const NoteApp = props => {
const [user, setUser] = useState({
userName: "",
email: ""
});
const addUser = (userName, email) => {
const newUser = { userName, email };
setUser(newUser);
};
return (
<div className="container p-0">
<div className="screen pt-2">
<p>Users</p>
{JSON.stringify(user)}
</div>
<UserNameMailForm addUser={addUser} />
</div>
);
};
const UserNameMailForm = ({ addUser }) => {
const [userName, setUsername] = useState("");
const [email, setEmail] = useState("");
const handleSubmit = e => {
e.preventDefault();
addUser(userName, email);
};
return (
<form onSubmit={handleSubmit} className="form-group">
<input
type="text"
className="form-control"
placeholder="User name"
value={userName}
onChange={e => setUsername(e.currentTarget.value)}
/>
<input
type="text"
className="form-control"
placeholder="email"
value={email}
onChange={e => setEmail(e.currentTarget.value)}
/>
<button type="submit" className="btn btn-outline-danger">
Add
</button>
</form>
);
};
ReactDOM.render(<NoteApp />, document.getElementById("root"));
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="root"></div>
The issue is that setUser is asynchronous, and user is a reference to the previous user object, which will be the object you pass as initial value to useState, so that's why console.log(user); is giving you the previous state.