How to return multiple times same component but with independant state?-CodePudding

Hi guys in react i want to do something like render 2 times a component in same render function like this

const Main()=>{

const [names, setNames] = useState([]);
const [selected, setSelected] = useState(-1);

return(
    <Component1 name={names[selected].name}
                setName={setNames}/>

    <Component1 name={names[selected].name}
                setName={setNames}/>
)
}

This where i passed setNames from Main() to Component1 to handle state and pass names from Main() then map it in select of Component1

<StyledSelect
       ml="10px"
       onChange={(e) => {
       setName(e.target.value);
        value={name}>
       {names.map(({ name}) => {
         return (
                <option key={name} value={name}>
                  {name}
                </option>
                );
         })}

my component has an html select that has names in it, when i choose one it trigger a it in database and retrieve name data (age, location), the problem is when i select name on my second Component1, it will also select the same name and retrieve same name data on my first Component1, and i want them to be independent. How ?

I tried to put key like that

return(
    <Component1 key="compare" name={name}/>
    <Component1 key="compared" name={name}/>
)

but nothing changes

Thanks

CodePudding user response：

This question is worded incorrectly (this has nothing to do with state and everything to do with props and how React renders) and is missing information, but here are a few pieces of information that might help:

Keys don't change anything on the front-end; they are a tool React uses to improve performance on the back-end. Click here to read the docs for more information on keys and how React uses them.
React components are JavaScript functions and can therefore only return 1 thing. The code sample you shared would not work in React (or JavaScript). In order to return multiple items, it is possible to wrap them in an array or a React Fragment. Consider this example:

    render() {
      return (
        <React.Fragment>
          <ChildA />
          <ChildB />
          <ChildC />
        </React.Fragment>
      );
    }

If you want to make the dropdowns different in appearance and/or functionality, the name prop will need to be different. Right now, both instances of Component1 are being given the same name property, which is why they probably look and behave identically.

CodePudding user response：

(i would like can comment but i can't)

i am not sure (i must see the complete code) but i think that:

return(
    <Component1 key="compare" name={name}/>
    <Component1 key="compared" name={name}/>
)

must be

return(
    <Component1 key="compare" name={name1}/>
    <Component1 key="compared" name={name2}/>
)

this way they don't share the same variable

CodePudding user response：

Where is it that you're making the call and setting the name? Since you're passing the same prop name to both of them they will be the same. Either you set name inside Component1 itself or you make a different state for each Component1.