I build simple Input component. I noticed that when I type something in input field console.log that is inside component gets fired for both instances of this custom component. I was thinking that it is happening because of state change that is stored inside object, but I'm not sure. I would be grateful for some advices or resources to help me understand this behaviour.
import React, { useState } from "react";
const Input = (props) => {
const inputSettings = {
value: props.value,
onChange: props.onChange,
name: props.name,
placeholder: props.placeholder,
type: props.type,
id: props.id,
};
console.log("inputSettings", inputSettings);
let externalPositioning = "";
if (props.hasOwnProperty("externalPositioning")) {
externalPositioning = `${props.externalPositioning}__input-wrapper`;
}
return (
<div className={`input-wrapper ${externalPositioning}`}>
<input className='input' {...inputSettings} />
<label className='label' htmlFor={props.id}>
{props.label}
</label>
</div>
);
};
const App2 = () => {
const [formData, setFormData] = useState({
startingPlace: "",
destination: "",
});
const handleInputChange = (e) => {
const { name, value } = e.currentTarget;
setFormData((prevFormData) => ({
...prevFormData,
[name]: value,
}));
};
return (
<>
<Input
label='Starting place'
name='startingPlace'
id='starting-place'
type='text'
value={formData.startingPlace}
onChange={handleInputChange}
/>
<Input
label='Destination'
type='text'
name='destination'
id='destination'
value={formData.destination}
onChange={handleInputChange}
/>
</>
);
};
export default App2;
