I am building a simple todo app. I am stuck figuring out how to edit those todos using the form. In another component I have a function which I am passing through props which updates the global state. I am able to pass the input fields data that the user selected to be able to update it.
How can i update the submitted values which are passed through props?
const TodoForm = (props) => {
const [error, setError] = useState(null);
const [success, setSuccess] = useState(null);
const titleInputRef = useRef();
const descriptionInputRef = useRef();
function submitHandler(e) {
e.preventDefault();
const titleInputValue = titleInputRef.current.value;
const descriptionInputValue = descriptionInputRef.current.value;
const inputData = {
title: titleInputValue,
description: descriptionInputValue,
id: Date.now(),
completed: false,
};
props.submitInputHandler(inputData);
e.target.reset();
}
return (
<div className="col-span-2 text-center">
<h1 className="text-xl mb-2">Nueva tarea</h1>
<form className="space-y-2" onSubmit={submitHandler}>
<label htmlFor="title" className="block">
Titulo
</label>
<input
ref={titleInputRef}
type="text"
id="title"
/>
<label htmlFor="description" className="block">
Descripcion
</label>
<textarea
ref={descriptionInputRef}
name="descripcion"
id=""
cols="25"
rows="5"
></textarea>
<button >
Click
</button>
</form>
</div>
);
};
I suppose that you want to change the value directly.
In this case you could change the value property of the input reference directly from the ref.current like so:
titleInputRef.current.value = 'Some value'
Related
I m beginner to reactJS and I m having so much trouble with self learning.
I want to print the data I get from first page.
I used 2 .js files
This is userpage.js:
import resultPage from "./resultPage";
// JS
//const input = document.getElementById('myText');
//const inputValue = input.value
// React
// value, onChange
const Multi = () => {
const [person, setPerson] = useState({ firstName: "", email: "", age: "" });
const [people, setPeople] = useState([]);
const handleChange = (e) => {
const name = e.target.name;
const value = e.target.value;
setPerson({ ...person, [name]: value });
};
const handleSubmit = (e) => {
//e.preventDefault();
if (person.firstName && person.email && person.age) {
const newPerson = { ...person, id: new Date().getTime().toString() };
setPeople([...people, newPerson]);
setPerson({ firstName: "", email: "", age: "" });
resultPage(people, person);
}
};
return (
<>
<article className="form">
<form>
<div className="form-control">
<label htmlFor="firstName">Name : </label>
<input
type="text"
id="firstName"
name="firstName"
value={person.firstName}
onChange={handleChange}
/>
</div>
<div className="form-control">
<label htmlFor="email">Email : </label>
<input
type="email"
id="email"
name="email"
value={person.email}
onChange={handleChange}
/>
</div>
<div className="form-control">
<label htmlFor="age">Age : </label>
<input
type="number"
id="age"
name="age"
value={person.age}
onChange={handleChange}
/>
</div>
<button type="submit" className="btn" onClick={handleSubmit}>
add person
</button>
</form>
</article>
</>
);
};
export default Multi;
This has 2 textboxes and a submit button.
This code is from resultPage.js:
function resultPage(people, person) {
return (
<article>
{people.map((person) => {
const { id, firstName, email, age } = person;
return (
<div key={id} className="item">
<h4>{firstName}</h4>
<p>{email}</p>
<p>{age}</p>
</div>
);
})}
</article>
);
}
export default resultPage;
What am I doing wrong? I m new to reactjs. So kindly spare my obvious mistakes and help me.
From React documentation
HTML form elements work a bit differently from other DOM elements in React, because form elements naturally keep some internal state.
You need to add handleSubmit to your form, and it'll work. As #Halcyon suggested, using a Capital case for a component is good. It's tough to distinguish between HTML elements and components if you use lowercase. Read this for more details.
I am attaching a working sandbox for your code.
You're calling resultPage in handleSubmit. That's not going to work. You want resultPage to be part of the rendering, probably conditionally.
Consider something like:
return <>
{person.firstName !== "" && <resultPage people={people} person={person} />}
{person.firstName === "" && <>
// the form
</>}
</>;
Also since resultPage is a component, it's best to capitalize it.
I think you probably want a 3rd component:
const MyComponent = () => {
const [ people, setPeople ] = React.useState([]);
const [ isEditing, setIsEditing ] = React.useState(false);
return <>
{isEditing && <Multi setPeople={(people) => {
setPeople(people);
setIsEditing(false);
}}
{isEditing === false && <resultPage people={people} />}
</>;
}
Mutli now accepts a prop setPeople that is called in handleSubmit.
I have created a form in react and store the details in firebase but my problem is even if the feilds are empty the form is submitted, i want validation that feild should not be empty if the user wants to submit.
const Account2 = () => {
const [kookid, setKookID] = useState("");
const [kookname, setKookName] = useState("");
const userCollectionRef = collection(db, "mastermenu")
const handleSubmit = () => {
addDoc(userCollectionRef,{
kookid: kookid,
kookname: kookname,
}).then(() => {
if(!alert("form Submitted Successfully!!!"));
navigate("/account");
})
return (
<><div className='outer-container'>
<h1 className='text-3xl font-bold py-2'>MASTER MENU</h1>
</div>
<div className='outer-container'>
<form className='contactform'>
<label>Kook ID</label>
<input
placeholder=""
onChange={(e) => setKookID(e.target.value) } />
<label>Kook Name</label>
<input
required
placeholder=""
onChange={(e) => setKookName(e.target.value)} />
</form>
<button onClick={handleSubmit}>Submit</button>
</div></>
)
}
I am coding with react. I created a Form and on submit I want to send the value of the input field as parameter of another react component, here is "cypher_query" of . Here is my code, it's not working, I don't know where I did mistake. Please help 🙏
const AppGraph = () => {
const [query, setQuery] = useState("");
const handleSubmit = (evt) => {
evt.preventDefault();
}
return (
<div>
<form id="myForm" onSubmit={handleSubmit} >
<div className="App" style={{ fontFamily: "Quicksand" }}>
<label htmlFor="CommentsOrAdditionalInformation">enter your query</label>
<input
name = "requete"
type="text"
id="CommentsOrAdditionalInformation"
value = {query}
onChange={e => setQuery(e.target.value)}
>
</input>
<input type = "submit" value="Submit" className="btn_submit" alt = "submit Checkout"/>
</div>
<p>{query}</p>
</form>
{<ResponsiveNeoGraph
containerId={"id0"}
neo4jUri={NEO4J_URI}
neo4jUser={NEO4J_USER}
neo4jPassword={NEO4J_PASSWORD}
cypher_query={query}
/>}
</div>
);
};
export default AppGraph;
was wondering if there is any way to directly display the value of a variable from ref without using state, all the examples deal with "alerting" and alert works just fine, I'm trying to figure out to way to display it immediately as well. So, I am simply trying to display the value from the "name" here. Apologies for the x variable naming.
I assume it's not friendly to the DOM.
Thank you.
const UncontrolledExample = () => {
const name = useRef();
let x = '';
const showValue = (e) => {
e.preventDefault();
alert(name.current.value);
x = name.current.value;
return x;
};
return (
<div>
<label>
<input type="text" ref={name}/>
</label>
<button onClick={showValue}>
Display value : {x}
</button>
</div>
)
}
In react, if you want the page to update, you must set state. Your tutorial seems to be showing you how to do uncontrolled components. If you want to keep the input as an uncontrolled component you can, but you still need a state for X. That would look like this:
const UncontrolledExample = () => {
const name = useRef();
const [x, setX] = useState('');
const showValue = (e) => {
e.preventDefault();
setX(name.current.value);
};
return (
<div>
<label>
<input type="text" ref={name}/>
</label>
<button onClick={showValue}>
Display value : {x}
</button>
</div>
)
}
Alternatively, you can turn the input into a controlled component. If you want the display value to only change when the button is pressed, you'll need two states:
const ControlledExample = () => {
const [inputValue, setInputValue] = useState('');
const [x, setX] = useState('');
const showValue = (e) => {
e.preventDefault();
setX(inputValue);
};
return (
<div>
<label>
<input type="text"
value={inputValue}
onChange={(e) => setInputValue(e.currentTarget.value)}
/>
</label>
<button onClick={showValue}>
Display value : {x}
</button>
</div>
)
}
If they should always change simultaneously (ie, without the button), you just need one state:
const ControlledExample = () => {
const [inputValue, setInputValue] = useState('');
return (
<div>
<label>
<input type="text"
value={inputValue}
onChange={(e) => setInputValue(e.currentTarget.value)}
/>
</label>
<p>Display value : {inputValue}</p>
</div>
)
}
I have read page after page and I am not sure what I am doing wrong. My useState works with my other inputs. I am unable to get it to work with my textarea.
Also, what would be the best way to use my data in another component?
import React, { useState } from "react";
const OrderItems = () => {
const [commentText,setCommentText] = useState("")
const onSubmit = (data) => {
console.log(data.commentText);
}
return (
<>
<form id="myForm" onSubmit={handleSubmit(onSubmit)} >
<div>
<label
htmlFor="CommentsOrAdditionalInformation">Comments or Additional Information</label>
<textarea
name = "commentTextArea"
type="text"
id="CommentsOrAdditionalInformation"
value = {commentText}
onChange={e => setCommentText(e.target.value)}
>
</textarea>
</div>
</form>
<button type = "submit" form ="myForm" className="btn_submit" alt = "submit Checkout">
<a href ="/cart/preview"/>
<img src = ""/>
</button>
</>
)
}
You are initializing state outside the function, Please do it like this:
Also, You are logging the wrong state inside onSubmit.
import React, { useState } from "react";
const OrderItems = () => {
const [commentText,setCommentText] = useState("")
const handleSubmit = (evt) => {
evt.preventDefault();
console.log(commentText);
}
return (
<>
<form id="myForm" onSubmit={handleSubmit} >
<div>
<label
htmlFor="CommentsOrAdditionalInformation">Comments or Additional Information</label>
<textarea
name = "commentTextArea"
type="text"
id="CommentsOrAdditionalInformation"
value = {commentText}
onChange={e => setCommentText(e.target.value)}
>
</textarea>
<input type = "submit" value="Submit" className="btn_submit" alt = "submit Checkout"/>
</div>
</form>
</>
)
}
To use the data in another component: If it is a child component pass it as props. Else use state management tools like context or redux.
Also, for routing, I would recommend using React Router. Refer here.
Some things to keep in mind:
import React, { useState } from "react";
const OrderItems = () => {
// Always initialise state inside the component
const [commentText,setCommentText] = useState("")
const handleOnSubmit = event => {
event.preventDefault();
console.log(commentText);
}
return (
// onSubmit should just be a reference to handleOnSubmit
<form id="myForm" onSubmit={handleOnSubmit} >
<div>
<label
htmlFor="CommentsOrAdditionalInformation">Comments or Additional Information
</label>
// You can self-close the textarea tag
<textarea
name="commentTextArea"
type="text"
id="CommentsOrAdditionalInformation"
value={commentText}
onChange={e => setCommentText(e.target.value)}
/>
</div>
// Put the button inside the form
<button type = "submit" form ="myForm" className="btn_submit" alt="submit Checkout">
<a href ="/cart/preview"/>
<img src = ""/>
</button>
</form>
);
}