I have this simple form in my App form. I learned that a button with type="reset" clears the inputs, but it isn't working here with React. Am I missing something?
import { useState } from "react";
export default function App() {
const [name, setName] = useState("");
return (
<form>
<input
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Name"
name="name"
/>
<button>Submit</button>
<button type="reset">Reset</button>
</form>
);
}
You must reset the state name with an empty string when the reset button is clicked.
export default function App() {
const [name, setName] = useState("");
const onClickReset = () => setName('');
return (
<form>
<input
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Name"
name="name"
/>
<button>Submit</button>
<button type="reset" onClick={onClickReset}>Reset</button>
</form>
);
}
import { useState } from "react";
export default function App() {
const [name, setName] = useState("");
return (
<form>
<input
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Name"
name="name"
/>
<button>Submit</button>
<button type="reset" onClick={() => setName('')}>Reset</button>
</form>
);
}
Use an object to maintain the initial state of the form and on RESET, update the state using the initial object.
Also, use event.preventDefault() to prevent the default action of the reset button.
const {useState} = React;
function App() {
const initState = {
name:''
};
const [name, setName] = useState(initState.name);
const onReset = (e)=>{
e.preventDefault();
setName(initState.name);
}
return (
<form>
<input
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Name"
name="name"
/>
<button>Submit</button>
<button type="reset" onClick={e=>onReset(e)}>Reset</button>
</form>
);
}
ReactDOM.createRoot(
document.getElementById("root")
).render(
<App />
)
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
The reason for this is that your input is now controlled by a state, if you want to clear the form by type='reset' try removing the value and onChange attributes in your input. but if you want to clear the state you can create a function that will handle this. here's a sample function for your reference.
function handleClear() {
setName('')
}
<button type="button" onClick={handleClear}>Reset</button>
Related
I have 4 input fields.
username,password,email,mobile.
if we type # in username field, the email field should disappear and if we type any digit in username then mobile field should disappear.
Help me with this.
I have created very basic code but not sure how to achive this.
import { useState } from "react";
export default function App() {
const [name, setname] = useState("");
const [password, setPassword] = useState("");
const [show, setShow] = useState();
if (name.includes("#")) {
setShow( ) //stuck here
}
return (
<>
<input
type="text"
placeholder="username"
value={name}
onChange={(e) => setname(e.target.value)}
/>
<input
type="password"
placeholder="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<input type="email" placeholder="email" id="email" />
<input type="number" placeholder="number" />
</>
);
}
Try below code
import { useState } from "react";
export default function App() {
const [name, setname] = useState("");
const [password, setPassword] = useState("");
//****************************************
const [show, setShow] = useState(false);
//****************************************
if (name.includes("#")) {
//****************************************
setShow(true) //stuck here
//****************************************
}
return (
<>
<input
type="text"
placeholder="username"
value={name}
onChange={(e) => setname(e.target.value)}
/>
<input
type="password"
placeholder="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
//****************************************
{ show?
<input type="email" placeholder="email" id="email" />:''}
//****************************************
<input type="number" placeholder="number" />
</>
);
}
we can use with && operator if our show is false then it hide on screen
import { useState } from "react";
export default function App() {
const [name, setname] = useState("");
const [password, setPassword] = useState("");
const [show, setShow] = useState(true);
if (name.includes("#")) {
setShow(false) //stuck here
}
return (
<>
<input
type="text"
placeholder="username"
value={name}
onChange={(e) => setname(e.target.value)}
/>
<input
type="password"
placeholder="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
{show && <input type="email" placeholder="email" id="email" />}
<input type="number" placeholder="number" />
</>
);
}
I'll give example with the email - you can apply same approach for the phone.
Some notes: you do not need a separate state whether to show email filed, it is derived from the name state.
Advice: You should not change state during the function render. You can do that on a user interaction (onClick, onChange etc) or useEffect hook if data fetch or another side effect.
The solution is simple
import { useState } from "react";
export default function App() {
const [name, setname] = useState("");
const [password, setPassword] = useState("");
const [show, setShow] = useState();
const showEmailField = name.includes("#"); //derived computed value base on the name state
return (
<>
<input
type="text"
placeholder="username"
value={name}
onChange={(e) => setname(e.target.value)}
/>
<input
type="password"
placeholder="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
{ showEmailField && <input type="email" placeholder="email" id="email" /> }
<input type="number" placeholder="number" />
</>
);
}
you can try using the useEffect hook.
try something like this .
in this way you can keep track of everytime name changes
useEffect(() => {
if (name.includes("#")) {
setShow();
}
}, [name]);
and then
show && (
<input
type="text"
placeholder="username"
value={name}
onChange={(e) => setname(e.target.value)}
/>
)
I have an input field in my react project to display a separate component when it's in a hover state. I have a separate component called [Focus Style] from the Actual component but all I'm doing is not working. The focus state should work with the first input field Kindly assist me. My code below.
Main Componenet
import React, { useState, useEffect } from "react";
import stays from "./Components/stays.json";
// import styled, {css} from "styled-components";
import FocusStyle from "../src/Components/FocusStyle";
export default function SearchGuest() {
const [guest, setGuest] = useState("");
const [location, setLocation] = useState("");
const [Data, setData] = useState([]);
const [filteredData, setFilteredData] = useState(Data);
const [focus, setFocus] = useState("false");
const onFocusChange = () => {
setFocus("true");
console.log("focused");
};
useEffect(() => {
setData(stays);
setFilteredData(stays);
}, []);
const handleSearch = (event) => {
event.preventDefault();
};
return (
<div>
<form action="" >
<input
onFocus={onFocusChange}
type="text"
name="guest"
id=""
// value={guest}
placeholder="text"
onChange={handleSearch}
style={focus ? { border: "1px solid yellow" } : <FocusStyle/> }
/>
<input
type="number"
name="location"
id=""
// value={location}
placeholder="number"
onChange={handleSearch}
/>
<button value="submit" >Search</button>
</form>
{console.log(filteredData)}
</div>
);
}
FocusStyle Component
import React from 'react'
export default function FocusStyle() {
return (
<div>
<h2 style={{marginTop: "90px", color: 'pink'}}>Focus Componenet</h2>
<div className="modal">
<div className="adult">
<span>Adult</span>
<button>-</button><span>0</span><button>+</button>
</div>
<div className="children">
<span>Children</span>
<button>-</button><span>0</span><button>+</button>
</div>
</div>
</div>
)
}
if so then you can do this
{focus ? <input
onFocus={onFocusChange}
type="text"
name="guest"
id=""
// value={guest}
placeholder="text"
onChange={handleSearch}
style={{ border: "1px solid yellow" }}
/>:
<FocusStyle/>
}
What I am trying to do is, upon clicking the Submit button, I want to grab the value that was typed into the input to then update the h1.
import React from "react";
function App() {
const [headingText, setHeadingText] = React.useState("");
function handleChange(event) {
setHeadingText(event.target.value);
}
function handleSubmit(event) {
alert(event.target);
}
return (
<div className="container">
<form onSubmit={handleSubmit}>
<h1>Hello {headingText}</h1>
<input
onChange={handleChange}
type="text"
placeholder="What's your name?"
value={headingText}
/>
<button type="submit">Submit</button>
</form>
</div>
);
}
export default App;
With the above code, so far I am able to update the h1 after every single keystroke that is entered into the input. But instead of that, I want to only update the h1 with the input value when I press the Submit button.
You'll need to use 2 useState's, one to hold the value of the input box, the other to hold the value of the header.
// import React from "react"; // not On StackOverflow
function App() {
const [headingTextBuffer, setHeadingTextBuffer] = React.useState("");
const [headingText, setHeadingText] = React.useState("");
function handleChange(event) {
setHeadingTextBuffer(event.target.value);
}
function handleSubmit(event) {
event.preventDefault();
setHeadingText(headingTextBuffer);
}
return (
<div className="container">
<form onSubmit={handleSubmit}>
<h1>Hello {headingText}</h1>
<input
onChange={handleChange}
type="text"
placeholder="What's your name?"
value={headingTextBuffer}
/>
<button type="submit">Submit</button>
</form>
</div>
);
}
// export default App; // not on StackOverflow
ReactDOM.render(<App />, document.querySelector("#root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>
One way you could do this is using an inputText state that is updated in your handleChange function.
Now when you submit in your submit function you can update the headingText state to be equal to the inputText which should update your h1 value.
You could put the result of each keystroke in the state in another field that is not displayed anywhere and on click put the value from that new field into the heading. Like this :
import React from "react";
function App() {
const [tempHeadingText, setTempHeadingText] = React.useState("");
const [headingText, setHeadingText] = React.useState("");
function handleChange(event) {
setTempHeadingText(event.target.value);
}
function handleSubmit(event) {
setHeadingText(tempHeadingText);
}
return (
<div className="container">
<form onSubmit={handleSubmit}>
<h1>Hello {headingText}</h1>
<input
onChange={handleChange}
type="text"
placeholder="What's your name?"
value={tempHeadingText}
/>
<button type="submit">Submit</button>
</form>
</div>
);
}
export default App;
return (
{jobstate.jobs.map((data,i) =>{
<form>
<input type="text" placeholder="Post a comment" onChange={(e) => jobcmthandler(e,data._id,i) } />
<button type="button" onClick={postcmt} >Send</button>
</form>
})}
)
I generate dynamic HTML using the map function and I want to disabled button if text null for induvial form and also how to get text value on button click in react js
I can't really see why you'd want to do this but here you go (example):
import React, { useState } from "react";
export default function App() {
return ["Name", "Age"].map((label) => <Form label={label} />);
}
function Form({ label }) {
const [readValue, writeValue] = useState("");
return (
<form>
<label>{label}</label>
<input
type="text"
placeholder="Post a comment"
onChange={(e) => writeValue(e.target.value)}
value={readValue}
/>
<button
type="button"
onClick={() => console.log("Submit")}
disabled={readValue === ""}
>
Send
</button>
</form>
);
}
I've tried using onSubmit on both the inputs and the submit button but I know that's wrong. and I've tried connecting the functions to the inputs. I've seen examples of people using https links to get it posted but I just want to be able to change the color and text when you click submit.
this.state = {
deftextcolor: "green",
text: "Color Me"
}
}
colorchanger(newcolor) {
this.setState({deftextcolor: newcolor})
}
textchanger(newtext) {
this.setState({text: newtext})
}
render() {
return (
<div className='colorer-wrapper'>
<h1 style={{color: this.state.deftextcolor}}>{this.state.text}</h1>
<input type="text"/>
<input type="text"/>
<button type="submit">Submit</button>
</div>
);
}
}
here some example:
const App =()=>{
const [state,setState] = React.useState({bgColor:"",textColor:"",color:"white",backgroundColor:"red"});
const handleChange = (e)=>{
const {target} = e
setState(current =>({...current,[target.name]:target.value}))
}
const onSubmit = (e)=>{
e.preventDefault();
if(state.bgColor.length>0 && state.textColor.length>0)
setState((current)=>({bgColor:"",textColor:"",color:current.textColor,backgroundColor:current.bgColor}))
}
return (<div><form style={{backgroundColor:state.backgroundColor,color:state.color}} onSubmit={onSubmit}>
<div>test style color</div>
<input type="text" name="bgColor" placeholder="background color" value={state.bgColor} onChange={handleChange}/>
<input type="text" name="textColor" value={state.textColor} onChange={handleChange} placeholder="text color"/>
<button type="submit">Apply style </button>
</form></div>)
}
ReactDOM.render(<App/>,document.getElementById("root"))
form{
width:100vw;
height:100vh
}
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<div id="root"></div>
remenber you need to store event in variable because react update state asynchronously so the event will be gone.
Two places you can wire with onSubmit,
wire it with a button directly
<button onClick={onSubmit} />
wire it with form
<form onSubmit={onSubmit}>
<button type="submit" />
</form>
Your function needs to look like
const onSubmit = (e) => {
// do something. here
}
In your case, you also want to pass something into this function, so either calling handleSubmit directly or <button onClick={ e=> { colorchanger(color) } />
Like this:
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
deftextcolor: "green",
text: "Color Me",
defInput: '',
textInput: ''
}
}
handleChange = (e) => {
this.setState({[e.target.id]: e.target.value})
}
handleSubmit = () => {
this.setState((state) => ({
deftextcolor: state.defInput,
text: state.textInput,
defInput: '',
textInput: ''
}))
}
render() {
return (
<div className='colorer-wrapper'>
<h1 style={{color: this.state.deftextcolor}}>{this.state.text}</h1>
<input type="text" value={this.state.defInput} onChange={this.handleChange} id="defInput"/>
<input type="text" value={this.state.textInput} onChange={this.handleChange} id="textInput"/>
<button type="submit" onClick={this.handleSubmit}>Submit</button>
</div>
);
}
}
export default App
You can attach the same method to both inputs to update state input values, and then another method to the button that uses state input values to update your other state properties.