I am working on some code that takes the inputs from two textboxes, one that takes a string value and one that takes a number value, and in real time writes it to a paragraph without a submit button. I am having trouble finding any information on this process without submitting anything. The paragraph should just display . To begin, this is what I have:
import './App.css';
function App() {
return (
<div>
<form>
<div>String:</div>
<input type="text" strng = "strng" /><br/><br/>
<div>Number:</div>
<input type="text" strng = "number"/><br/><br/>
<button>Clear</button>
<p>
Inputs:
</p>
</form>
</div>
)
}
export default App;
Would someone be able to help me out with writing the two text boxes to the paragraph in real time? Thanks so much in advance.
You should be able to bind a useState with the onChange event of the input
import './App.css';
import { useState } from "react";
function App() {
const [text, setText] = useState("");
return (
<div>
<form>
<div>String:</div>
<input
type="text"
strng="strng"
onChange={(e) => setText(e.target.value)}
/>
<br />
<br />
<div>Number:</div>
<input type="text" strng="number" />
<br />
<br />
<button>Clear</button>
<p>Input: {text}</p>
</form>
</div>
);
}
Related
In the browser returns the input in the list when I placed, but in the same second disappears. Until the end of the function the array is fulfill, when refresh the response the array "does" is empty.
Something is wrong and the state is not storing.
import React,{useState} from 'react';
import './App.css';
function App() {
const [text1,setText1] = useState('');
const [does,setDoes] = useState([]);
function addTodo(){
return setDoes([...does,text1]);
}
return (
<div>
<h1>To do List!</h1>
<form onSubmit={addTodo}>
<input type="text" name='text1' id='text1' placeholder='To do' onChange={(e)=>setText1(e.target.value)}/>
<button type="submit" className="submitButton">Add</button>
</form>
<ul className='todoo'>
{does.map(item => <li key={item.toString()}>{item}</li>)}
</ul>
</div>
);
}
export default App;
I expect to storage the tasks...
To not disappear when you place a text and click add use e.preventDefault()
Like this:
function App() {
const [text1, setText1] = useState("");
const [does, setDoes] = useState([]);
const addTodo = (e) => {
e.preventDefault();
return setDoes([...does, text1]);
};
return (
<div>
<h1>To do List!</h1>
<form onSubmit={(e) => addTodo(e)}>
<input
type="text"
name="text1"
id="text1"
placeholder="To do"
onChange={(e) => setText1(e.target.value)}
/>
<button
type="submit"
className="submitButton"
>
Add
</button>
</form>
<ul className="todoo">
{does.map((item) => (
<li key={item.toString()}>{item}</li>
))}
</ul>
</div>
);
}
export default App;
and if you want to keep the data in the page when you refresh it you can either use an api to store the data to a database or to use localStorage.
https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
As you have used the form, the page refreshed when you click the submit button. Instead of a form, you can use a div and handle the event with the click of the submit button. So you can do it this way:
...
<h1>To do List!</h1>
<div>
<input
type="text"
name="text1"
id="text1"
placeholder="To do"
onChange={(e) => setText1(e.target.value)}
/>
<button type="submit" className="submitButton" onClick={addTodo}>
Add
</button>
</div>
...
I have been trying to redirect (using navigate from "react-router-dom") from the Login screen based on the radio button the user clicks, I've tried using states but i don't know if that's the way to go or if there's an easier way to do what i want to do.
I've checked some other questions here but i don't know if that's what I should do either
Here's what I've written so far (pretty much the entire Component):
import { TextInput, Text, View } from "react-native";
import { styles } from '../../App';
import logo from "../../logo.svg";
import Button from 'react-bootstrap/Button';
import { Route, useNavigate } from "react-router-dom";
import {useState} from 'react';
export default function LoginForm() {
const navigate= useNavigate();
const [opcion, setOpcion] = useState();
return (
<View>
<form name="LoginForm" method="GET" action="#" onSubmit={()=> navigate(opcion=="Preceptor"? "/AdministrarCurso_Preceptor": "/AdministrarCurso_Portero")}>
<label htmlFor="usuario">Nombre de Usuario</label> <br/>
<input required type="text" name="usuario" defaultValue="" /> <br/>
{/* <label htmlFor="correo">Correo Electronico</label> <br/>
<input required type="text" name="correo" defaultValue="" /> <br/> */}
<label htmlFor="contraseña">Contraseña</label> <br/>
<input required type="password" name="contraseña" defaultValue="" /> <br/> <br/>
<><input type="checkbox" />
Mantener la sesión iniciada</><br/>
<><input type="radio" name="profesion" required onChange={(e)=> setOpcion(e.target.value)} />
Portero</><br/>
<><input type="radio" name="profesion" required onChange={(e)=> setOpcion(e.target.value)}/>
Preceptor</><br/>
<input type="submit" value="Ingresar" />
{/* <Button onClick={()=> navigate('/RegisterForm')}>¿No estás registrado?</Button> */}
</form>
</View>
);
}
PS: I've already solved my other question from before, I just don't know how to mark it as answered
You should add which value="" are you getting:
<input type="radio" name="profesion" required value="Portero" onChange={(e)=> setOpcion(e.target.value)} /> Portero
<input type="radio" name="profesion" required value="Preceptor" onChange={(e)=> setOpcion(e.target.value)} /> Preceptor
and also change this part of the code opcion == "Preceptor" to this opcion === "Preceptor" use strict equality
I am trying to get useFormik to validate radio groups, but it seems not to work, here is a brief example of what I am doing, whenever I submit the form after checking any of the radio input, formik throws validation error, ({currState:"you must choose property state"}), even though I choose an option.
I realized getFieldProps attaches value field to the radio, so i tried using defaultValue then react throws an error about choosing one of controlled and uncontrolled components.
import { useFormik } from "formik"
export function ListProperty(){
const { handleSubmit, getFieldProps, touched, errors } = useFormik(
{
initialValues: {
currState:"",
},
validationSchema:Yup.object().shape({
currState:Yup.string().required("you must choose property state")
}),
return (
<form onSubmit={handleSubmit} >
<div className="form-group inline">
<div className="form-control">
<input type="radio"
name="currState"
{...getFieldProps("currState")}
value="serviced"
/>
<label>serviced</label>
</div>
<div className="form-control">
<input
type="radio"
value="furnished"
name="currState"
{...getFieldProps("currState")}
/>
<label>furnished</label>
</div>
<div className="form-control">
<input
type="radio"
value="newlybuilt"
name="currState"
{...getFieldProps("currState")}
/>
<label>newly built</label>
</div>
</div>
<button type="submit">submit </button>
</form>
)
}
I gave up on the implementation with getFieldProps and did it simpler, like this:
import { useFormik } from 'formik'
export default function Component() {
const formik = useFormik({
initialValues: {
radioButtonValue: ''
},
onSubmit: values => console.log(values)
})
const handleRadioButtons = e => formik.values.radioButtonValue = e.target.value
return (
<form onSubmit={formik.handleSubmit}>
<input
type="radio"
id="one"
name="group"
value="One"
onChange={e => handleRadioButtons(e)}
required
/>
<label htmlFor="one">One</label>
<br />
<input
type="radio"
id="two"
name="group"
value="Two"
onChange={e => handleRadioButtons(e)}
/>
<label htmlFor="two">Two</label>
<button type="submit">Submit</button>
</form>
)
}
Beware, if you use formik.values.radioButtonValue value as a useEffect dependency, then setting it like this: formik.values.radioButtonValue = e.target.value not gonna trigger the change, and useEffect won't launch (at least in my case it didn't). As an alternative, you gonna have to implement some kind of condition check with this value in your useEffect code
You need to map onChange like below.
<input
type="radio"
value="furnished"
name="currState"
onChange={getFieldProps("currState").onChange}
/>
I want to show all the details filled in the html form on another page using react js. I have created the html form which is the landing page. And after clicking on submit all the information should be displayed on another page.
My form.js page for creating the html form
import React, { component } from 'react';
var details = () => {
return(
<div>
<form>
Name: {" "}
<input type="text" placeholder="Enter name" /><br />
Contact No.: {" "}
<input type="number" placeholder="Enter contact number" />
<br />
<input type="submit" value="submit"/>
</form>
</div>
);
}
export default details;
My app.js page
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Details from './form/form';
function App() {
return (
<div className="App">
<header className="App-header">
<Details />
</header>
</div>
);
}
export default App;
The data which you'll store in react state will be in browser memory and on refresh you'll lose that data.
In case, If you want functionality like the preview on form submit then you can store data in state and show/hide the preview on form submit.
So, Basically you can use state or some third party state management library to store the data. Here is a basic example of how you can achieve in the same details component.
import React, { useState } from 'react';
const Details = () => {
const [name, setName] = useState('');
const [number, setNumber] = useState(null);
const [showPreview, setShowPreview] = useState(false);
return(
<div>
{!showPreview && <form onSubmit={e => e.preventDefault()}>
Name: {" "}
<input type="text" placeholder="Enter name" onChange={e => setName(e.target.value)} /><br />
Contact No.: {" "}
<input type="number" placeholder="Enter contact number" onChange={e => setNumber(e.target.value)} />
<br />
<input type="button" value="submit" onClick={() => setShowPreview(!showPreview)}/>
</form>}
{showPreview && (<div>
<p>{name}</p>
<p>{number}</p>
</div>)}
</div>
);
}
export default Details;
Again, This answer is based on lots of assumptions. Maybe we need some more details in the question to have a precise answer.
In case if you want to display the same data on any other page then you can use Redux. Which can store the data in the redux store and you display the same data on another page.
First, on the app we want to create a function that can receive the data, then send it to the component as a prop:
import React from 'react';
import Details from './form';
function App() {
const getFormData = function (name, number) {
console.log('Name: ', name, 'Number: ', number)
}
return (
<div className="App">
<header className="App-header">
<Details sendFormData={getFormData} />
</header>
</div>
);
}
export default App
Then, inside the component you want to set each input to update their state as they change. When you click submit, you pass the state to the up to the app components getFormData function.
import React, { useState } from 'react';
const Details = (props) => {
const [userName, setName] = useState('');
const [userNumber, setNumber] = useState('');
const handleSubmit = () => {
props.sendFormData(userName, userNumber)
}
return (
<div>
Name: {" "}
<input type="text" placeholder="Enter name"
onChange={event => setName(event.target.value)} /><br />
Contact No.: {" "}
<input type="number" placeholder="Enter contact number"
onChange={event => setNumber(event.target.value)} />
<br />
<button onClick={() => handleSubmit()} >Submit</button>
</div>
);
}
export default Details;
I'm new to react and redux and i want to create component which contain two radio buttons so i write something like this:
import React, { PropTypes } from 'react';
const renderCashRadioButtons = currentCashSelector => (
<form onClick={currentCashSelector}>
<input
type="radio"
name="cash-transaction"
value="Transcation"
onChange={value => currentCashSelector(value)}
/>
<input
type="radio"
name="cash-transfer"
value="Transfer"
onChange={value => currentCashSelector(value)}
/>
</form>
);
const CashRadioButtons = ({ currentCashSelector }) => (
<div className="container">
{renderCashRadioButtons(currentCashSelector)}
</div>
);
CashRadioButtons.propTypes = {
currentCashSelector: PropTypes.func.isRequired
};
export default CashRadioButtons;
currentCashSelector is a function. When i render this it does not seem to work. The value does not change and i'm not seeing the state to be updated. Do you have any ideas?
You probably want your radio buttons to have the same name, so that when one is selected, the other is deselected.
It looks like your onChange functions are expecting the value, but they're actually receiving the event.
You likely have unwanted duplication between the onChange on your form, and the ones on your radio buttons.
Possible Solution
<form onClick={event => currentCashSelector(event.target.value)}>
<input
type="radio"
name="cash-type"
value="Transaction"
/>
<input
type="radio"
name="cash-type"
value="Transfer"
/>
</form>