React Js - On change all select are changing

Question

I'm trying to create a list of select with one option but when changing any one they all changed, i want to handle them one by one. Im using map in order to get the data and display it using useState.

Here is the code below :

    const positions = patients.data.map((element) => {
        return element.first_name + " " + element.last_name;
    });
    const [Position, setPosition] = useState(positions[0]);

  const [serviceList, setServiceList] = useState([{service:""}]);
    const handleServiceAdd = () =>{
        setServiceList([...serviceList,{service:""}])
    }

    const handleServiceRemove = (index) => {
        const list = [...serviceList];
        list.splice(index,1);
        setServiceList(list);
    }

Can you include the render() or return() functions' values as well? — Mehrdad Moradi

Cedric Rabarijohn Cedric Rabarijohn · Accepted Answer · 2022-07-28T16:37:02

If you are using styled components, place them before writing the function that renders your component.

For example, your component name is "Component", your code shouldn't look like:

const Component => {
    const YourStyledComponent = styled.div``

    return(...) 
}

But it should look like:

const YourStyledComponent = styled.div``

const Component => {  
    return(...)
}

Why ? Because everytime you will change one state, everything inside your component will rerender

React Js - On change all select are changing

2 Answers