Onchange event in select should change others inputs field value? - reactjs

Question

As a Begineer in a react,here what i want to do is when i select options from the react-select option the i want to dispaly that selected options label in the text input down above on both field but got problem with here onchanges event How to change value in text field from the select options along with selected value?
Code
import React, { useState } from "react";
const initialValues = [{ number: "", options: "" }];
const countries = [
{ id: 1, name: USA },
{ id: 2, name: Russia },
{ id: 3, name: UK },
];
const Newrow = (props) => {
const [number, setNumber] = useState("");
const [options, setoption] = useState([]);
const [options1, setoption1] = useState("");
const addRow = () => {
let _row = {
number: "",
options: "",
};
props.setData(_row);
};
return (
<div>
<input
type="number"
value={number}
onChange={(e) => {
setNumber(e.target.value);
}}
/>
<input
type="text"
className="input"
value={options}
onChange={options1}
/>
<input
type="text"
className="input"
value={options}
onChange={options1}
/>
</div>
);
};
export default function App(props) {
const [data, setData] = useState([]);
const addRow = (row) => {
setData([...data, row]);
};
return (
<div className="App">
<Select
options={countries}
value={{
label: name,
value: id,
}}
onChange={(e) => {
const res = {
id: e.value,
name: e.label,
};
console.log(res);
setoption1(res);
}}
></Select>
{[...data, ...initialValues].map((row, idx) => {
return (
<Newrow
setData={addRow}
data={row}
key={idx}
delrow={idx}
options1={options1}
/>
);
})}
<button
type="submit"
onClick={() => addRow({ number: "", options: "" })}
className="btn btn-success"
>
Add
</button>
</div>
);
}

Answer 1

You appear to be passing in options1 (a string) into the onChange handler of your text inputs. The onChange handler should only take a function, that will be triggered when those inputs change.
You can discard the onChange={options1} property and change the value property to value={options1}.
Change this:
<input type="text"
className="input"
value={options}
onChange={options1}
/>
to this:
<input type="text"
className="input"
value={options1}
/>