React Js - Events With Hooks

 App.js

import React from "react";
import './App.css';
import ReactDom from "react-dom";
import Events from './events';


function App() {
 return(
   <>
   <Events/>
   </>
 );
}


export default App;


Events.js


import React, {useState} from 'react';

export default function Events() {   //react components name should start with upper case
    const purple = '#8e44ad';
    const [bg, setBg] = useState(purple);  
    const [named, setName] = useState("Click Me");

    const bgChange = () =>{
        let newBg = "#34495e";
        setBg(newBg);
        let newName = "UFF!";
        setName(newName);
      //  console.log("clicked");
    }

    const bgBack = () =>{
        setBg(purple);
        setName("Ayyo!");
    }

    return (
        <div className="main" style={{backgroundColor : bg}}>
            <p className="text-center pt-5">
            <button className="btn btn-primary" onDoubleClick={bgBack} onClick={bgChange}>{named}</button></p>
        </div>
    )
}

মন্তব্যসমূহ

একটি মন্তব্য পোস্ট করুন

এই ব্লগটি থেকে জনপ্রিয় পোস্টগুলি

React Js Cards (Props, Array, Mapping, Rendaring)

 App.js import Card from './card'; import './App.css'; import Movie from './Movie'; const movies = (val) =>{   return(     <>     <Card img={val.img} title={val.title} Category={val.Category}/>     </>   ) } function App() {   return (     <>     {Movie.map(movies)}            </>   ); } //map function is used to create a array of each array elements.  export default App; Card.js import React from 'react' export default function card(props) {   //props means properties. We can create custom attributes using props.     return (         <div className="card">             <img src={props.source} />             <div className="container">                 <h4><b>{props.title}</b...
আরও পড়ুন

React JS - Hooks

 App.js import './App.css'; import Cntr from './Cntr'; function App() {  return(    <>    <Cntr/>    </>  ); } export default App; Cntr.js import React, {useState} from 'react'; //use state is used to change the sate of a varibale means update a value with a eventlistner in our DOM.  export default function Cntr() {     const [count , setCount] = useState(0);   // const[variable , update value fuction] = useState (variable initialization);         const valinc = () =>{              setCount(count+1);   //set setcount function     }     return (         <div className="col-6 m-auto mt-4">               <h1 className="text-center">{count}</h1>               <p className="text-center"><button className...
আরও পড়ুন

React Js - Form Submit, Input

 App.js import React from "react"; import './App.css'; import ReactDom from "react-dom"; import Forms from './froms'; function App() {  return(    <>    <Forms/>    </>  ); } export default App; forms.js import React, { useState } from 'react'; const Forms = () => {     const [names, setnames] = useState("");     const [fullnames, setfullname] = useState("");     const submitting = (e) =>{         e.preventDefault();       //revent default events     }     const inputEvent = (e) => {         console.log(e.target.value);         setnames(e.target.value);     }     const clicked = () => {         setfullname(names);     }     return (         <>             <div classNam...
আরও পড়ুন