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.

1 Like

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

1 Like