Getting the value of list of inputs in react - reactjs

Question

I have list of input tags in my react app. I want to get the value of all inputs when I click on submit button.
I can get the value of one input, but not able to get all the values in one go.
keys.map(i => <Input fullWidth defaultValue={i} />)
<Button>Submit</Button>
get the list of values

Answer 1

Sample application for multiple inputs
const App = () => {
const [people, setPeople] = React.useState([
{ firstName: "Herry", lastName: "Sejal" },
{ firstName: "John", lastName: "Siri" },
{ firstName: "Bukky", lastName: "Sera" }
]);
const [person, setPerson] = React.useState({ firstName: "", lastName: "" });
const onChange = e => {
setPerson({ ...person, [e.target.name]: e.target.value });
};
const onSubmit = e => {
e.preventDefault();
const newVal = [...people, person];
setPeople(newVal);
setPerson({ firstName: "", lastName: "" });
};
return (
<div className="container">
<div className="row">
<div className="col">
<h2>Add a person: </h2>
<hr />
<form onSubmit={onSubmit}>
<div className="form-group">
<input
type="text"
className="form-control"
name="firstName"
placeholder="First Name.."
value={person.firstName}
onChange={onChange}
/>
</div>
<div className="form-group">
<input
type="text"
className="form-control"
name="lastName"
placeholder="Last Name.."
value={person.lastName}
onChange={onChange}
/>
</div>
<button className="btn btn-success" type="submit">
Add person
</button>
</form>
</div>
<div className="col">
<h2>People: </h2>
<hr />
{people.map(p => (
<div key={Math.random() * 1000000000}>
<p>
{p.firstName} {p.lastName}
</p>
</div>
))}
</div>
</div>
</div>
);
};