Apply whitespaces in yew string in a tag

i am building a yew application and I send a request to server for getting a text to show it on a textarea tag

the response is sth like "hello\nit is for \ntest"
i want to be shown like this in my textarea tag

hello 
it is for 
test

but it shows just like the response and i dont know how can i apply those whitespaces on that string tag.
anyone has an idea?
here is my code

#[derive(Clone)]
struct DataResponse{
    text : String
}
#[derive(Properties,PartialEq)]
pub struct Props{
    pub url:String,
    #[prop_or_else(||"".to_owned())]
    inner_text:String
}

pub struct Page;

impl Component for Page {
    type Message=();

    type Properties=Props;

    fn create(ctx: &Context<Self>) -> Self {
        log!(ctx.props().url.clone());
        let url = ctx.deref().props().url.clone();
        log!(&url);
        let interval = Interval::new(5000,move|| send_request(url.clone()) );

        interval.forget();
        Self
    }

    fn view(&self, ctx: &Context<Self>) -> Html {

            html! {
        <>
        <ToolBar url={"test"}/> 
        <div>
            <div class="container-fluid">
                <textarea id="textarea" class="textarea" >
                    {"hello i am here"}
                </textarea>
            </div>
        </div>
        </>
     }
    }
    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        false

    }
}
fn send_request(url:String){
    let url = url.clone();
    wasm_bindgen_futures::spawn_local(async move{
        let _url = format!("http://127.0.0.1:3000/{}",url);
        // log!(&_url);
        // log!("sdfasdfas");
        let response = Request::get(_url.as_str())
        .send()
        .await
        .unwrap()
        .text()
        .await
        .unwrap();

        let textarea:Element = document().get_element_by_id("textarea").unwrap();
        textarea.set_inner_html(format!("{}",response).as_str())
    });

}

Try giving textarea the white-space: pre-wrap CSS attribute. Found this possible solution in this answer on SO.


You also might want to lookt at this section of the yew tutorial on how to use state in yew. Rather than setting the inner html of your element, if you were to use use_state, you might be able to mitigate the problem fully, by relying on yew rather than raw web API calls.

2 Likes

The futures example might also be of interest. It illustrates different ways to send messages to a component, synchronously or asynchronously.

2 Likes

thank you so much for your reply

The main problem of using use_state instead of web API calls is that there is a 5 seconds interval for getting response from server and updating the text .so ctx can not be used inside of this Interval::new(5000,move|| send_request(url.clone()) ); block due to lifetime issues. so I choosed to use web API calls instead.

This topic was automatically closed 90 days after the last reply. We invite you to open a new topic if you have further questions or comments.