Mi problema es que tengo un menú desplegable y los elementos son un poco extraños. La primera fila se ve en blanco y los datos que tengo se ven así.

Sé que el primer usuario tiene un nombre de username: null y probablemente por eso se muestra el espacio en blanco, pero en la interfaz quiero cambiar el nombre de usuario del usuario del índice 0 para que siempre diga "Yo mismo", ya sea nulo o no. ¿Cómo modifico su valor?

Así es como se ve el menú desplegable

 async componentDidMount() { const ep = `${process.env.REACT_APP_API}/partners/roles`; const users = await axios.get(ep); if (users.data.success) { this.setState({ users: users.data.data.users.filter(f => !f.isArchived) }); } console.log("Users", users) if (this.props.item) { this.setState({ id: this.props.item.id, description: this.props.item.description, due: this.props.item.due, priority: this.props.item.priority, assigned: this.props.item.assigned }); } }

Aquí es donde se generan los elementos desplegables.

 <select name="assigned" id="assignedto" type="text" className="form-control" style={{ width: "70%" }} onChange={e => { this.setState({ assigned: e.target.value }); }} > <option value="">Myself</option> {this.state.users.map(e => ( <option value={e.id} key={e.id}> {e.username} </option> ))} </select>