event Handeling in react

 import React, { useState } from "react";


function Ap(){

const [headingtag,setheaingteg] = useState("yoyo");
const [ismouseover,color] = useState(false);




function handel(){
setheaingteg("submited")
}

function jscolor(){
color(true);
}

function js(){
color(false);
}

return(
<div className="cent">
<h1>{headingtag}</h1>
<input type="text" placeholder="Type your Name" />
<button
onMouseOut={js}
onMouseOver={jscolor} onClick={handel} style={{backgroundColor: ismouseover ? "yellow" : "white"}}
>Click Hear</button>

</div>
)
}

export default Ap;



// in this we are trying to handel the event with the help of some
function like over and out js function and also manageing states
and added on ternery operator

Comments

Post a Comment

Popular posts from this blog

Hook and useState in React

  import   './App.css' ;  import   React  ,{ useState }  from   "react" ; function   App (){ //setInterval ( updateTime , 1000 ) //1000 is sec //this is a function by javascript    const   now  =  new   Date (). toLocaleTimeString ();    const  [ time ,  setTime ] =  useState ( now ); // first wla variable and 2nd wala function ever time useState me kuch hona chiya phela function   updateTime (){    const   newTime  =  new   Date (). toLocaleTimeString ();  //variable     setTime ( newTime ); } return (    < div   className  =  "container" >    < h1 > { time } </ h1 >    < button   onClick = { updateTime } > GetTime </ button > </ div > ) }       ...
Read more

Props and pass data from object list

 obj list const Brand = [ { name : "biplav" , song : "chalu haa" , }, { name : "emiway" , song : "malum haa na" , }, { name : "Rafter" , song : "Swag mara desi" , }, { name : "ikka" , song : "half window" , } ] export default Brand ; import react from "react" ; import Brand from "./Reel" ; console . log (Brand); function M1 () { return ( < div > < h1 > { Brand[ 0 ]. name } </ h1 > < h1 > { Brand[ 0 ]. song } </ h1 > < h1 > { Brand[ 1 ]. name } </ h1 > </ div > ); } export default M1 ; import "./styles.css" ; import M1 from "./Chal" export default function App () { function P1 (props){ return ( < div > < h1 > { props . car } </ h1 > < h1 > { props . car } </ h1 ...
Read more

React Map function

 in react map function every element is going in a loop and the element or components should be in array [] like [ ]  we can call function under function or we say that  call function under map function we can write map function let a = [12,3,4,5,5]; const no = a.map(function(x){  return x*2;  } ); console.log(no); and also  function n(x){ return x*2; }
Read more