I am using React Hooks and am created a form to submit blog posts. I am having trouble writing the submitPost logic. I have a post, and setPost variable. setPost doesn't seem to be updating post with the new post in the submitPost function, so my api call function createPost isn't receiving the new req.body. But when I created a second function changePost(), post is updated.
This is my code.
export default function NewPost({ props }) {
const [post, setPost] = useState({
title: "",
img: "",
content: "",
user_id: 0,
});
const [img, setImg] = useState("");
const [title, setTitle] = useState("");
const [content, setContent] = useState("");
const [userId, setUserId] = useState(0);
useEffect(() => {
const handleUser = async () => {
try {
const response = await verifyUser();
console.log(response);
setUserId(response.user.id);
} catch (error) {
console.log(error);
}
};
handleUser();
});
const changePost = () => {
const newPost = {
title: title,
img: img,
content: content,
user_id: userId,
};
setPost(newPost);
console.log(post);
};
const submitPost = async (e) => {
e.preventDefault();
console.log(userId);
try {
console.log(title);
changePost();
console.log("submitPost", post);
await createPost(post);
props.history.push("/posts");
} catch (error) {
console.log(error);
}
};
console.log(post);
return (
<div>
<Nav />
<div class="ui main text container segment mt-100">
<div class="ui huge header salmon">New Blog </div>
<form class="ui form" onSubmit={submitPost}>
<div class="field">
<label> Title </label>
<input
type="text"
name="title"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="title"
/>
</div>
<div class="field">
<label> Image </label>
<input
type="text"
name="img"
value={img}
onChange={(e) => setImg(e.target.value)}
placeholder="image"
/>
</div>
<div class="field">
<label> Body </label>
<textarea
name="content"
value={content}
onChange={(e) => setContent(e.target.value)}
placeholder="blog post goes here"
>
{" "}
</textarea>
</div>
<input class="ui teal big basic button" type="submit" />
</form>
</div>
</div>
);
}
It won't work. You're trying to create a post where your post variable is not yet updated. You don't need to create so many variables, just use the post variable.
Try using the below code.
export default function NewPost({ props }) {
const [post, setPost] = useState({
title: "",
img: "",
content: "",
user_id: 0,
});
useEffect(() => {
const handleUser = async () => {
try {
const response = await verifyUser();
console.log(response);
setPost({...post, user_id: response.user.id});
} catch (error) {
console.log(error);
}
};
handleUser();
});
const submitPost = async (e) => {
e.preventDefault();
console.log(userId);
try {
console.log(title);
console.log("submitPost", post);
await createPost(post);
props.history.push("/posts");
} catch (error) {
console.log(error);
}
};
console.log(post);
return (
<div>
<Nav />
<div class="ui main text container segment mt-100">
<div class="ui huge header salmon">New Blog </div>
<form class="ui form" onSubmit={submitPost}>
<div class="field">
<label> Title </label>
<input
type="text"
name="title"
value={title}
onChange={(e) => setPost({...post, title: e.target.value})}
placeholder="title"
/>
</div>
<div class="field">
<label> Image </label>
<input
type="text"
name="img"
value={img}
onChange={(e) => setPost({...post, img: e.target.value})}
placeholder="image"
/>
</div>
<div class="field">
<label> Body </label>
<textarea
name="content"
value={content}
onChange={(e) => setPost({...post, content: e.target.value})}
placeholder="blog post goes here"
>
{" "}
</textarea>
</div>
<input class="ui teal big basic button" type="submit" />
</form>
</div>
</div>
);
}
just do this .
useEffect(()=>{
},[JSON.stringify(post)])..
setPost({ title,img,content,user_id});
Related
So I have some formdata in my react app that I want to persist after I make a put request to the mongodb. Problem is that the change is not visible on page refresh. It is only after I log out and log in again that I can see the updated value in the form.
For example let's say that I want to change my first name from John to Eric. The change will update but not in the form. In the form the value will still be John until I log out and in again.
It feels almost like it has to do with the jwt token but I don't know. Any ideas what the problem can be?
export const Edit = () => {
const navigate = useNavigate();
const user = Cookies.get("access_token");
const [id, setId] = useState(null)
const [firstName, setFirstName] = useState("")
const [lastName, setLastName] = useState("")
const [city, setCity] = useState("")
const [email, setEmail] = useState("")
const checkUser = async () => {
try {
const res = await axios
.get(`${process.env.REACT_APP_API_URL}user/protected`, {
withCredentials: true,
headers: {
Authorization: `Bearer ${user}`,
},
})
console.log(res.data.user);
setId(res.data.user.id)
setFirstName(res.data.user.firstName)
setLastName(res.data.user.lastName)
setCity(res.data.user.city)
setEmail(res.data.user.email)
} catch (error) {
console.warn(error)
}
}
useEffect(() => {
if (!user) {
navigate('/')
} else {
checkUser();
}
}, []);
const updateUser = async () => {
try {
const userData = {
firstName: firstName,
lastName: lastName,
city: city,
email: email
}
const API_URL = `${process.env.REACT_APP_API_URL}user/`;
const userId = id;
const res = await axios.put(API_URL + "/" + userId + "/edit", userData)
setFirstName(res.data.firstName)
setLastName(res.data.lastName)
setCity(res.data.city)
setEmail(res.data.email)
// works and is updated in the database
} catch (error) {
console.warn(error)
}
}
return (
<>
<section className="m-5">
<h1 className="mb-5 text-center">Settings</h1>
<form className="row g-3">
<div className="col-md-6">
<label htmlFor="firstName" className="form-label">
First name
</label>
<p>{formErrors.firstName}</p>
<input
type="text"
className="form-control"
id="firstName"
name="firstName"
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
/>
</div>
<div className="col-md-6">
<label htmlFor="lastName" className="form-label">
Last name
</label>
<p>{formErrors.lastName}</p>
<input
type="text"
className="form-control"
id="lastName"
name="lastName"
value={lastName}
onChange={(e) => setLastName(e.target.value)}
/>
</div>
<div className="col-md-6">
<label htmlFor="city" className="form-label">
City
</label>
<p>{formErrors.city}</p>
<input
type="text"
className="form-control"
id="city"
name="city"
value={city}
onChange={(e) => setCity(e.target.value)}
/>
</div>
<div className="col-md-6">
<label htmlFor="email" className="form-label">
Email
</label>
<p>{formErrors.email}</p>
<input
type="email"
className="form-control"
id="email"
name="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="col-12 pt-4 text-center">
<button
type="submit"
className="btn btn-primary btn-lg"
onClick={updateUser}
>
Update
</button>
</div>
<div className="col-12 pt-1 text-center">
<button
type="submit"
className="btn btn btn-lg"
>
<a href="edit/password" className="text-decoration-none">
Change Password
</a>
</button>
</div>
</form>
</section>
</>
);
};
Add user as a dependency to the useEffect's dependency array:
useEffect(() => {
if (!user) {
navigate('/')
} else {
checkUser();
}
}, [user]);
i a new user and a new in React world. I need help to solve this situation about a Select with values from mysql DB.
I receive the values, but the select goes in infinite loop.
The error is surely in this file cause server.js works without problem!!
Really thanks for the help, and sorry if it could be a stupid question. I m studying react from one week and i have not found answers on internet
function FormAddMenu({ registerMenu }) {
const [nomeMenuReg, setNomeMenuReg] = useState("");
const [descrizioneMenuReg, setDescrizioneMenuReg] = useState("");
const [prezzoMenuReg, setPrezzoMenuReg] = useState("");
const [disponibilitaMenuReg, setDisponibilitaMenuReg] = useState("");
const [portataMenuReg, setPortataMenuReg] = useState("");
const [addMenu, setAddMenu] = useState({
portataMenuReg: "",
nomeMenuReg: "",
descrizioneMenuReg: "",
prezzoMenuReg: "",
disponibilitaMenuReg: "",
});
const [portate, setPortate] = useState({ value: "", label: "" });
const selectOptions = async () => {
Axios.post("http://localhost:3001/selectPortata").then((response) => {
// console.log("risposta:",response.data)
setPortate(
response.data.map((risp) => ({
...setPortate,
value: risp.value,
label: risp.label,
})),
);
});
};
selectOptions();
console.log("portate:", portate);
const submitHandler = (e) => {
e.preventDefault();
registerMenu(addMenu);
document.getElementById("addmenu").reset();
};
const handleCheckbox = (e) => {
console.log(e.target.checked);
if (e.target.checked === true) {
setAddMenu({ ...addMenu, disponibilitaMenuReg: 1 });
} else {
setAddMenu({ ...addMenu, disponibilitaMenuReg: e.target.value });
}
};
return (
<div className="container width85">
<h1>CREA IL MENU'</h1>
<form id="addmenu">
<div className="mb-3">
<label htmlFor="portataMenuReg" className="form-label">
PORTATA
</label>
<Select
options={portate}
onChange={(e) => setAddMenu({ ...addMenu, portataMenuReg: e.target.value })}
className="mb-3"
/>
</div>
<div className="mb-3">
<label htmlFor="nomeMenuReg" className="form-label">
NOME
</label>
<input
type="text"
onChange={(e) => setAddMenu({ ...addMenu, nomeMenuReg: e.target.value })}
className="form-control"
id="nomeMenuReg"
rows="3"
/>
</div>
<div className="mb-3">
<label htmlFor="descrizioneMenuReg" className="form-label">
DESCRIZIONE
</label>
<textarea
className="form-control"
onChange={(e) =>
setAddMenu({ ...addMenu, descrizioneMenuReg: e.target.value })
}
id="descrizioneMenuReg"
rows="3"
></textarea>
</div>
<div className="mb-3">
<label htmlFor="prezzoMenuReg" className="form-label">
PREZZO
</label>
<input
type="text"
className="form-control"
onChange={(e) => setAddMenu({ ...addMenu, prezzoMenuReg: e.target.value })}
id="prezzoMenuReg"
rows="3"
/>
</div>
<div className="mb-3">
<label htmlFor="disponibilitaMenuReg" className="form-label">
DISPONIBILITA'
</label>
<input
type="checkbox"
value="0"
className="htmlForm-control"
onChange={handleCheckbox}
id="disponibilitaMenuReg"
rows="3"
/>
</div>
<div className="mb-3">
<button type="submit" onClick={submitHandler} className="btn btn btn-danger">
AGGIUNGI AL MENU
</button>
</div>
</form>
</div>
);
}
export default FormAddMenu;
Wrap the selectOptions(); call in an useEffect (since loading data and mutating state based on it is a side effect).
The empty dependency array (documented above) means the effect is only executed once on mount.
React.useEffect(() => {
selectOptions();
}, []);
have that problem with resetting the values of the input fields in the form. and wanted to ask if somebody knows a better and way to do that instead of just making 'useState' for every field...
const handleSubmit = (e) => {
e.preventDefault();
emailjs.sendForm('sample_id', 'someother_id', formRef.current, 'user_is')
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
setMessage(true);
setEmail("");
setName("");
setSubject("");
setTextarea("");
};
return (
<div className="contact" id="contact">
<div className="left">
<img src="" alt="" />
</div>
<div className="right">
<h2>Kontakt</h2>
<form ref={formRef} onSubmit={handleSubmit}>
<label>Name</label>
<input onChange={(e) => setName(e.target.value)} type="text" placeholder="Name" name="user_name" value={name} />
<label>Email</label>
<input onChange={(e) => setEmail(e.target.value)} type="email" placeholder="Email" name="user_email" value={email} />
<label>Betreff</label>
<input onChange={(e) => setSubject(e.target.value)} type="text" placeholder="Subject" name="user_subject" value={subject} />
<label>Nachricht</label>
<textarea onChange={(e) => setTextarea(e.target.value)} placeholder="Message" name="message" value={textarea} />
<button type="submit">Send</button>
{message && <span>Thanks we will respond ASAP.</span>}
</form>
</div>
</div>
)
}
You could use a single state for all the form values (kinda like we did before functional components)
// this could be outside your component
const initialState = { email: "", name: "", subject: "", textArea: ""};
// declaring your state
const [formState, setFormState] = React.useState(initialState);
and then
const handleSubmit = (e) => {
e.preventDefault();
emailjs.sendForm('sample_id', 'someother_id', formRef.current, 'user_is')
.then((result) => {
console.log(result.text);
}, (error) => {
console.log(error.text);
});
setMessage(true);
setFormState(initialState)
};
You also would have to rewrite your input handlers. Like that :
<input onChange={(e) => setFormState({...formState, name: e.target.value})} type="text" placeholder="Name" name="user_name" value={name} />
import React, { useState } from 'react'
import styled from 'styled-components'
import Title from '../Components/Title'
import { InnerLayout, MainLayout } from '../Styles/Layout'
import Button from '../Components/Button'
import { db } from '../firebase';
function Contact() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [message, setMessage] = useState("");
const [subject, setSubject] = useState("");
const handleSubmit = (e) => {
e.preventDefault();
db.collection('mail').add({
name: name,
email: email,
subject: subject,
message: message,
})
.then(() => {
alert("Thank you for contacting. Your message has been sent successfully.");
})
.catch((err) => {
alert(err.message);
});
setName('')
setEmail('')
setSubject('')
setMessage('')
};
return (
<MainLayout>
<Title title={'Contact'} span={'Contact'} />
<ContactMain>
<InnerLayout className='contact-section'>
<div className="left-content">
<div className="contact-title">
<h4>Get In Touch</h4>
</div>
<form className="form" onSubmit={handleSubmit}>
<div className="form-field">
<label htmlFor="name">Enter Your Name</label>
<input type="text" id="name" value={name} onChange={(e) => setName(e.target.value)} />
</div>
<div className="form-field">
<label htmlFor="email">Enter Your Email</label>
<input type="email" id="email" value={email} onChange={(e) => setEmail(e.target.value)} />
</div>
<div className="form-field">
<label htmlFor="subject">Enter Your Subject</label>
<input type="text" id="subject" value={subject} onChange={(e) => setSubject(e.target.value)} />
</div>
<div className="form-field">
<label htmlFor="text-area">Enter Your Message</label>
<textarea name="textarea" id="textarea" cols="30" rows="10" value={message} onChange={(e) => setMessage(e.target.value)}></textarea>
</div>
<div className="form-field f-button">
<Button title="Send Email" />
</div>
</form>
</div>
</InnerLayout>
</ContactMain>
</MainLayout>
)
}
I don't know why but I am not able to send the details to my firebase database. I am not able to find the issue in this code. I have copied the firebase database key and all in the firebase.js and then imported it in this contact.js and I then made the necessary changes in this. Still, I am not able to figure out the issue.
I would reset the form once the promise returned by add() is resolved.
const handleSubmit = (e) => {
e.preventDefault();
db.collection('mail').add({
name: name,
email: email,
subject: subject,
message: message,
}).then(() => {
// Reset those states here
setName('')
setEmail('')
setSubject('')
setMessage('')
alert("Thank you for contacting. Your message has been sent successfully.");
}).catch((err) => {
alert(err.message);
});
};
I guess your states are being reset to "" before the document is added as those setState methods would have ran before the doc was added.
Potentially because your button html within its the button component type is not set to 'submit' - I had the same issue I think which ended up being super simple.
I have class component for user sign up along with a form. I am making an api call based on user input to check if a user exists. The handleInputChange initially sets the state to some user input and the handleSubmit makes a call to another function which fetches from an endpoint. I want to set this.state.user to that response. I tried what was on this link but couldn't get it to work. Any ideas would help
import React, { Component } from 'react';
const user_add_api = "http://localhost:5000/add_user";
const user_check_api = "http://localhost:5000/user_by_username/";
here is the class:
class SignUp extends Component {
constructor(props) {
super(props);
this.state = {
first_name: '',
last_name: '',
username: '',
email: '',
password: '',
user: ''
};
}
checkUser = (user) => {
const userPromise = fetch(user_check_api + user);
var meh = '123meh';
userPromise
.then(data => data.json())
.then(data => this.setState({user: {...this.state.user, meh}}))
// let curr = {...this.state};
// curr['user'] = 'somevalue';
// this.setState({ curr:curr['user'] });
console.log(this.state.user);
}
handleSubmit = (event) => {
event.preventDefault();
const data = this.state;
let s = this.checkUser(data.username);
console.log(data);
}
handleInputChange = (event) => {
event.preventDefault();
this.setState({
[event.target.name]: event.target.value,
})
}
render () {
return (
<form className="form-horizontal">
<div className="form-group">
<label className="col-md-4 control-label">First Name</label>
<div className="col-md-4">
<input name="first_name" type="text" placeholder="John" className="form-control input-md" required onChange={this.handleInputChange}></input>
</div>
<label className="col-md-4 control-label">Last Name</label>
<div className="col-md-4">
<input name="last_name" type="text" placeholder="Doe" className="form-control input-md" required onChange={this.handleInputChange}></input>
</div>
<label className="col-md-4 control-label">Username</label>
<div className="col-md-4">
<input name="username" type="text" placeholder="John Doe" className="form-control input-md" required onChange={this.handleInputChange}></input>
</div>
<label className="col-md-4 control-label">Email</label>
<div className="col-md-4">
<input name="email" type="text" placeholder="johndoe#example.com" className="form-control input-md" required onChange={this.handleInputChange}></input>
</div>
<label className="col-md-4 control-label">Password</label>
<div className="col-md-4">
<input name="password" type="password" placeholder="" className="form-control input-md" required onChange={this.handleInputChange}></input>
</div>
<label className="col-md-4 control-label"></label>
<div className="col-md-8">
<button name="save" onClick={this.handleSubmit} className="btn btn-success">Register</button>
</div>
</div>
</form>
);
}
}
export default SignUp;
This fetch(user_check_api + user) return a Promise and you not wait it. Maybe you should change like that
checkUser = (user) => {
var meh = '123meh';
fetch(user_check_api + user)
.then(data => data.json())
.then(data => {
this.setState({user: {...this.state.user, meh}})
console.log(this.state.user) // Show log in in success func
})
}
Or use async/await
checkUser = async (user) => {
const userPromise = await fetch(user_check_api + user);
var meh = '123meh';
userPromise
.then(data => data.json())
.then(data => this.setState({
user: {...this.state.user, meh}
}, console.log(this.state.user))) // Show log in callback
}