Encountered a problem in react. There area two input Textfield in the same row with labels (A, B) having an initial null value. Then how we can achieve this?
You can achieve this using onChange event and useState hook. in the below example, I defined a onChange event where I set A and B with what you typed and zero respectively.
import { useEffect, useState } from "react";
export default function App() {
const [a, setA] = useState();
const [b, setB] = useState();
function AKeyPress(e) {
e.preventDefault();
setB("0");
setA(e.target.value);
}
function BKeyPress(e) {
e.preventDefault();
setA("0");
setB(e.target.value);
}
return (
<div className="App">
<header className="App-header"></header>
<h1>Hello</h1>
A <input type="text" onChange={AKeyPress} value={a} />
B <input type="text" onChange={BKeyPress} value={b} />
</div>
);
}
You could store the values in state and if any of these changes, set the current one to the updated value, and delete the other one. You can use the onChange event to track changes and the event.target to get the field value.
Check out the example below:
function App() {
const [field1, setField1] = React.useState('');
const [field2, setField2] = React.useState('');
function handleChange(event) {
if (event.target.name === 'field1') {
setField2('');
setField1(event.target.value);
}
if (event.target.name === 'field2') {
setField1('');
setField2(event.target.value);
}
}
return (
<form>
<label>
Field 1
<input
type="text"
name="field1"
onChange={handleChange}
value={field1}
/>
</label>
<label>
Field 2
<input
type="text"
name="field2"
onChange={handleChange}
value={field2}
/>
</label>
</form>
);
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>You could also use an array as the state:
function App() {
const [inputs, setInputs] = React.useState([{
id: 'input1',
value: '',
}, {
id: 'input2',
value: '',
}]);
function handleChange(event) {
let updatedInputs = inputs.map((input) =>
input.id === event.target.name
? { ...input, value: event.target.value }
: { ...input, value: '' }
);
setInputs(updatedInputs);
}
return (
<form>
{inputs.map((input) => (
<label key={input.id}>
{input.id}
<input
type="text"
name={input.id}
onChange={handleChange}
value={input.value}
/>
</label>
))}
</form>
);
}
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);<div id="root"></div>
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>