one onChange input, wrongly modifies other three tags content-CodePudding

I have the next state:

const [social_networks, setSocial_networks] = useState([
    {
      social_account_type: "personal",
      social_network: "linkedin",
      handle: "",
      content: ""
    },
    {
      social_account_type: "company",
      social_network: "twitter",
      handle: "",
      content: ""
    },
    {
      social_account_type: "personal",
      social_network: "webpage",
      handle: "",
      content: ""
    }
])

In the parent component I declare the function:

const handleInputChange = (e, index) => {
    const { name, value } = e.target;
    const list = [...social_networks];
    list[index][name] = value;
    setSocial_networks(list);
  };

Set this to the children in the next code:

social_networks.map((social_network, idx) => {
                                  if (social_network.social_account_type == "personal") return <div key={idx}><AccountsPill handle={social_network.handle} social={social_network.social_network} content={social_network.handle} index={idx} handleInputChange={handleInputChange} />  </div>
                                })

And into my child component I have the next code:

<div className="row m-0">
    <div className="svg-container col-md-1">
        <BrowserIcon color="#868E96" />
    </div>
    <input type="text" className="col-md-11 set-account-input" placeholder= 
    {"www." props.social ".com"} name="handle" id="handle" defaultValue={props.handle} 
    onChange={e => props.handleInputChange(e, props.index)} />
</div>
<div className="row m-0">
       <div className="svg-container col-md-1">
           <AtIcon color="#868E96" />
       </div>
       <input type="text" className="col-md-11 set-account-input" placeholder="MyUsername" 
       name="content" id="content" defaultValue={props.content} onChange={e => 
       props.handleInputChange(e, props.index)} />
</div>

The page show me like that: after rendering frontpage

When I change the input.Content works fine: input.name=content change

But, if I change the input.name=handle , change the other input too: input.name=handle change

I tried to make two differents handleChange functions, change the props.name, add the props.id, but does'nt works yet.

CodePudding user response：

I think your problem is that const list = [...social_networks]; shallow copies the state array, so it's really just an array of the original state objects. Try instead:

const handleInputChange = (e, index) => {
  const { name, value } = e.target;
  const list = social_networks.map((social, i)=>{
    if(index === i){
      return {...social, [name]: value}
    }
    return {...social}
  })
  setSocial_networks(list);
};

CodePudding user response：

You passed wrong content props to your AccountsPill component, it should be

<AccountsPill
      handle={social_network.handle}
      social={social_network.social_network}
      content={social_network.content}
      index={idx}
      handleInputChange={handleInputChange}
/>