I have user with two parameters (username, and user groups )

I have Page that's update my user by changing username and update groups it looks like:

Problem is , I can't highlight groups , I need to choose to update .

const AddUser = props =>{
 
  let editing = false;
  let initialUsername = "";
  const[initialGroups, setInitialGroups] = useState([])


  useEffect(()=>{
    retrieveGroups();
    
  },[])

  const retrieveGroups = () => {
    BackendService.getAllGroups()
    .then(response => {
      setInitialGroups(response.data);
    })
    .catch(e => {
      console.log(e);
    });
  }
  


  const[username, setUsername] = useState(initialUsername);
  const[groups, setGroups] = useState(initialGroups);
  const[submitted, setSubmitted] = useState(false);



  const onChangeUsername = e => {

    const username = e.target.value;
    setUsername(username);

  }

  const onChangeGroups = e => {
    console.log(e);
    setGroups(Array.from(e.currentTarget.selectedOptions, (v) => v.value));
  }
  const saveUser = () => {
    var data = {
      username: username,
      groups: groups,
      complited: false,
    }
    
    BackendService.editUser(
      props.location.state.currentUser.id,
      data)
      .then(response=>{
        setSubmitted(true);
        console.log(response.data)
      })
      .catch(e=>{
        console.log(e);
      })
   )
  .catch(e=>{
    console.log(e);
  });

    }
  }
  
return(
  <Container>
    {submitted ? (
      <div>
        <h4>
          User Edited Successfully
        </h4>
        <Link to={"/users/"}></Link>
        Back to Users
      </div>
    ):(
      <Form>
        <Form.Group className="mb-3">
          <Form.Label>
            "Edit" User
          </Form.Label>
          <Form.Control
          type="text"
          required
          value={username}
          placeholder="Enter username here"
          onChange={onChangeUsername}
          />
          <Form.Control
          as="select"
          multiple value={initialGroups}
          onChange={onChangeGroups}
          >
            {initialGroups.map(group => (
              <option key={group.id} value={group.id}>
                {group.name}
              </option>
            ))}
          </Form.Control>
        </Form.Group>
        <Button variant="info" onClick={saveUser}>
          "Edit" User
        </Button>
      </Form>
    )}

  </Container>
)
}
export default AddUser;

In this section I get all groups(initialGroups) I have in database:

 const[initialGroups, setInitialGroups] = useState([])
    
    
      useEffect(()=>{
        retrieveGroups();
        
      },[])
    
      const retrieveGroups = () => {
        BackendService.getAllGroups()
        .then(response => {
          setInitialGroups(response.data);
        })
        .catch(e => {
          console.log(e);
        });
      }

After I put InitialGroups in :

       <Form.Control
          as="select"
          multiple value={initialGroups}
          onChange={onChangeGroups}
          >
            {initialGroups.map(group => (
              <option key={group.id} value={group.id}>
                {group.name}
              </option>
            ))}
          </Form.Control>

And process in :

const onChangeGroups = e => {
    console.log(e);
    setGroups(Array.from(e.currentTarget.selectedOptions, (v) => v.value));
  }

What I do wrong ? I can't highlight group I need to proces and update user

CodePudding user response：

I would like to make the following suggestions:

• You don't need to use 'initialGroups' as a state variable. You already have a 'groups' variable which can receive an initial value.

const [groups, setGroups] = useState([]);

• You can directly set the 'groups' variable once you retrieve the data.

        BackendService.getAllGroups()
          .then(response => {
            setGroups(response.data);
        })

• You should pass 'groups' to the 'value' prop on the Form component, instead of 'initialGroups' (and then map over it).

          <Form.Control
            as="select"
            multiple 
            value={groups}
            onChange={onChangeGroups}
          >
          {groups.map(group => (
            <option key={group.id} value={group.id}>
              {group.name}
            </option>
          ))}
          </Form.Control>

Hope this helps!