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

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

Changing the Title of Website on Button Click in React Hook tut 14

Changing the Title  of Website on Button Click in React Hook filename : ChgTitle.jsx import   React , {  useState ,  useEffect  }  from   'react' ; let   ChgTitle  = ()  =>  {      let  [ num ,  setNum ] =  useState ( 0 );      useEffect (() => {          document . title  =  `Clicked me 😎 ${ num }` ;     })      return  (          < >              < center >                  < br   />< br   />                  < button   onClick = { ()  => ...
Read more

useContext() in React tut 12

useContext() in React We can use useContext to receive the data directly from context provider instead of using complex context consumer  file hierchy :  ContextAPI.jsx ==> ComA.jsx ==> comB.jsx    we are sending data directly from ContextAPI.jsx to ComB.jsx. File : ContextAPI.jsx import   React , {  createContext  }  from   'react' ; import   ComA   from   './ComA' ; var   FilmName  =  createContext (); var   Earned  =  createContext (); let   ContextAPI  = ()  =>  {      return  (          < >              < FilmName.Provider   value = { 'GolMaal film' } >                  < Earned.Provider   value = { '25 crore' } > ...
Read more