Can I generate button elements at runtime?

[randall-coding]

OBJECTIVE:
I'm pulling objects out of my database and want to create X number of buttons for X number of entries I have in the database. Seems pretty simple and straightforward, but I'm running into errors and wondering if this is possible.

It could just be my lack of basic Rust knowledge, I've just been working in this language for a few months.

WHAT I CAN DO:
So far I'm able to create a static UI.

THE ERROR:
I want to be able to check my database at run time and make a button for each entry in my database.

Inside the code for my app (called Hello), I try to dynamically generate buttons like so

main.rs
impl Sandbox for Hello ... fn view()

let users = db::users::get_all().unwrap();
        let mut users_container = Column::<Message>::new();
        for (i, user) in users.iter().enumerate() {
            let button =
            UserButton::new(
                &user.id,
            ).view();
            users_container = users_container.push(button);
        }
...
let content = Column::new()
            .push(users_container)
Container::new(content)
            .width(Length::Fill)
            .height(Length::Fill)
            .padding(5)
            // .center_y()
            .into()

I receive the following error

error[E0515]: cannot return value referencing temporary value
--> src/main.rs:111:9
|
73 | / UserButton::new(
74 | | &user.id,
75 | | ).view();
| |_________________- temporary value created here
...
111 | / Container::new(content)
112 | | .width(Length::Fill)
113 | | .height(Length::Fill)
114 | | .padding(5)
115 | | // .center_y()
116 | | .into()
| |___________________^ returns a value referencing data owned by the current function

And here is how I declare my UserButton class

main.rs

struct UserButton {
    id: String,
    choose_user: button::State
}

impl UserButton {
    fn new(id: &str) -> Self {
        UserButton {
            id: String::from(id),
            choose_user: button::State::new(),            
        }
    }

    fn view(&mut self) -> Element<Message> {
        let button =
            Button::new(
                &mut self.choose_user,
                Text::new("Channel name")
                    .width(Length::Fill)
                    .horizontal_alignment(HorizontalAlignment::Center)
                    .size(16),
            )
            .width(Length::Fill)
            .padding(8)
            .on_press(Message::ChooseUser);
        button.into()
    }
}

Any help is appreciate. Thanks!

[13r0ck]

Yes it is!
I had the same issue here.
Basically,

1. store the button::States in a Vec in your main state struct
2. Fold those buttons into a Column or Row in the fn view
3. .map the message from the button to the parent (same line as step 2)
4. In the parent's fn update match the message :)

If you want a 2d grid of buttons I have that in my project here. (Just a warning its quite confusing, just get a Row or Column of buttons down first :))

[randall-coding]

@13r0ck Cool! Thanks for the reply.

I did just try a similar strategy before this (making a Vec of button::State in my main struct) and I managed to create another error.

Here is the code in fn view of my main struct

for (i, user) in users.iter().enumerate() {
            let button =
            Button::new(
                &mut self.user_button_states[i],
                Text::new("Choose User")
                    .width(Length::Fill)
                    .horizontal_alignment(HorizontalAlignment::Center)
                    .size(16),
            );
            users_container = users_container.push(button);
        }

I'm using self.user_button_states[i] for the state which seems to be what you are talking about. For some reason I get this error

cannot borrow self.user_button_states as mutable more than once at a time

Do you have a quick fix for that?

I will take a look at the links you provided as well.

[13r0ck]

No no quick fix, unfortunately you attempt is completely wrong :)
You need to iter_mut() though the vec of button::States. Basically no way to do it without the .fold
something like

let button_col = self.button_states.iter_mut().fold(Column::new() |col, btn| {
    col.push(
        Button::new(
            &mut btn,
            ~~ rest of button ~~
        )
    )
});

[randall-coding]

:) Thanks. I guess I'll be learning something new then.

.iter_mut() and .fold() it is then ✔️ .

[randall-coding]

@13r0ck Looks like the answer for me was just two things

1. replacing .iter() with .iter_mut()
2. iterating over my button::States vector instead of over my users vector.

for (i, state) in self.user_button_states.iter_mut().enumerate() {
           let button =
           Button::new(
               state,

You rock man! 🎸

[13r0ck]

Congrats!
When you want to get the message from the buttons .map() is what you will need.