Posts

Showing posts from June, 2024

React UPDATE (PUT) FORM

  import React , { useEffect } from "react" ; import axios from "axios" ; import { useState } from 'react' ; function UpdateForm (){     const [ city , setCity ] = useState ( '' );     const [ state , setState ] = useState ( '' );     const [ country , setCountry ] = useState ( '' );     useEffect (() => { // below code will show on form the data form django api         axios . put ( `http://localhost:8000/update/6/` )         . then (( response ) => {             setCity ( response . data . city );             setState ( response . data . state );             setCountry ( response . data . country );         })     },[]) // below handlechange will change data to latest data     const handleChange = ( e ) => {         const { n...

React GET FORM

  import React , { useState , useEffect } from "react" ; import axios from "axios" ; import UpdateForm from "./UpdateForm" ; function GetDjango (){     const [ data , setData ] = useState ([]);     useEffect (() => {         axios . get ( `http://127.0.0.1:8000/home` )         . then ( response => {             setData ( response . data );         })         . catch ( error => {             console . error ( error );         });     },[]);     return (         <>         < h1 > Django API With React JS </ h1 >         < table border = "1" >             < thead >                 < tr >     ...

React POST FORM

import React, { useState } from "react"; import axios from 'axios' ; function LatestForm (){     const [ city , setCity ] = useState ( "" );     const [ state , setState ] = useState ( "" );     const [ country , setCountry ] = useState ( "" ); const handleSubmit = ( event ) => {     event . preventDefault ();     axios . post ( `http://127.0.0.1:8000/` ,{ city , state , country })     . then ( response => {         alert ( "data has been registered on database." )     })     . catch ( error => {         console . error ( error );     });   };   return (     <>     < form method = "POST" onSubmit = { handleSubmit } >       < input type = "text" placeholder = 'city' value = { city } onChange = { e => setCity ( e . target . value ) } />< br />      ...

React Form

Image

All "event" properties in Javascript ?

// Common Event Properties event.type;               // Type of the event (e.g., "click", "keydown"). event.target;             // Element that triggered the event. event.currentTarget;      // Element to which the event handler is attached. event.bubbles;            // Boolean indicating if the event bubbles up through the DOM. event.cancelable;         // Boolean indicating if the event can be canceled. event.defaultPrevented;   // Boolean indicating if preventDefault() was called. event.eventPhase;         // Current phase of event propagation (1 = capturing, 2 = at target, 3 = bubbling). event.isTrusted;          // Boolean indicating if the event was generated by a user action or script. event.timeStamp;          // Time when the event was created. // Comm...