To Print Javascript Variables value to JSX Elements tut 3

# To Print Javascript Variables value to JSX Elements


var fname = "Vrushant"
var lname = "Domde"
var age = 18

var currDate  = new Date().toLocaleDateString();
var currTime  = new Date().toLocaleTimeString();

ReactDom.render(
    <>
  <h1 contentEditable="true">Hello World</h1>
  <p>My name is {fname} </p>
  <p>{`My Full Name is ${fname} ${lname}`}</p>
  <p>My age is {age}</p>
  <p>RAndom Number {Math.random()}</p>
  <p> 5 + 10 is {5+10}</p>
   <p> Current Date : {currDate}</p>
   <p> Current Time : {currTime} </p>    </> ,
   document.getElementById('root')
);

Explanation :

  •    We  can print the value of variable "fname" in p tag by using { } bracket . We have to put variable name inside {} like { fname } , so that it will print value of fname variable.
  •     If we have to print  lots of variable  in same text  with some spacing , so we can use <p>{`My Full Name is ${fname} ${lname}`}</p>
  • Attribute contentEditable="true" enable user to edit the content in h1  like tag.
  • Math.random() function use to print random number

Comments

Post a Comment

Popular posts from this blog

useHistory in React Router Tut 19

useHistory in React Router import   React   from   'react' ; import  { useHistory }  from   'react-router-dom' ; let   User  = ()  => {         var   history  =  useHistory ();      return (          < >    <h1> user page </h1>     < button   onClick = { () => history . goBack () } > GO Back </ button >   < br />< br />< hr />     < button   onClick = { () => history . push ( '/' ) } > Hompage </ button >          </ >     ) } export   default   User ; useHistory gives the information about pages with visited , so that we can go back to previous  page using goBack()   function and can visit to any page we want using pu...
Read more

Remote Method Invokation (RMI) in Java

Image
# Remote Method Invokation (RMI) in Java # What is RMI ?  RMI is an API that provide an mechanism to create distributed application in java. RMI allow an object to invoke the method of an object  running on another JVM(Java virtual Machine). RMI provide Remote Communication to the application using two special objects which are stub and skeleton . what is stub ? stub is an object act as gateway for client side application. All outgoing request are routed by stub. Following are the tasks of stub.     To establish the connection with the remote JVM. To write and trasmit the parameters to the remote object. (Marshalling)   stub wait for the result. To read the return value from remote object.(Unmarshalling) To send the result to its caller.   what is skeleton ? skeleton is an object act as gateway for server side application. All incoming request are routed by stub. Following are the tasks of skeleton.   To read the parameters from caller Invoke...
Read more

Redirect in React Router tut 20

Redirect in React Router Redirect can use to redirect page to given path        when page doesn't exsist , it can be used instead of        showing 404 error page, so when user enter in wrong url        it will redirect to certain given path import   React   from   'react' import  { Route  ,  Switch ,  Redirect }  from   "react-router-dom" import   Contact   from   './RContact' import   About   from   './RAbout' import   ErrorMsg   from   './ErrorMsg' import   Navbar   from   './Navbar' import   User   from   './UseParams' import   Search   from   './RSearch' ; let   Service ...
Read more