CODEWITHSUNDEEP
reactjstoastr
Nava Ruban
Nava Ruban

Reputation: 95

How to pass variable into react toastify?

So, How to pass a variable inside toaster for example

var msg= 'Hello World.<br/>This is awesome.<br/>Be Happy';

i passed this msg varible into toastr like this...

toast.error(<div>msg<div>)

the toaster is showing "msg" not "Hello World.This is awesome.Be Happy". someone give the right solution pls

Upvotes: 1

Views: 4795

Answers (4)

Shubham Verma
Shubham Verma

Reputation: 5054

You are passing variable wrong :

toast.error(<div>msg<div>) to 
toast.error(<div>{msg}<div>) //add template literal

//Better would create component as it would print dom as a string : 
//Better approach : 
const Msg = () => {
  return (
    <>
      Hello World.
      <br />
      This is awesome.
      <br />
      Be Happy
    </>
  );
};


toast.error(<Msg/>);

Upvotes: 4

Nava Ruban
Nava Ruban

Reputation: 95

Hi Thank you all for the correction, that is correct, and actually i am still getting the error while binding the dynamic parts.like this..

  var Msg='';
            Object.keys(errorsList).map((key) => {
                Msg= Msg + errorsList[key] + '<br/>';
            });

 toast.error(<div>{Msg}</div>);

When i bind as you said, new line <br/> is not working properly.please give the solution...

Upvotes: 1

MiDas
MiDas

Reputation: 374

Wrap the msg variable in curly braces like so toast.error({msg})

Upvotes: 1

ProblemsEverywhere
ProblemsEverywhere

Reputation: 547

By using toast.error(<div>msg<div>) you are sending a div with msg as content.

If you want to show the value of your msg variable you need to use toast.error(<div>{msg}<div>)

Upvotes: 1

Related Questions