Custom input component being called multiple times

Viewed 24

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;

Console.log gets fired multiple times

0 Answers
Related