TODO PROJECT IN REACT JS USING ARRAY HOOK, COMPONENT AND SPREAD OPERATOR

 App.jsx

import React, { useState } from "react";

import TodoList from "./TodoList";

const App = () => {

    const [inputText, setInputText] = useState(""); //Array Hook

    const [list, setList] = useState([]);

    const inputEvent = (event) => {

        setInputText(event.target.value);

    };

    const inputTextList = () => {

        setList((oldLists) => {

            return [...oldLists, inputText] //Spread Operator

        });

        setInputText("");

    }

    const deleteText = (id) => {

        console.log("deleted");

        setList((oldLists) => {

            return oldLists.filter((arrEle, index) => {

                return index !== id;

            });

        });

    }

    return (

        <>

            <div className='main_div'>

                <div className='center_div'>

                    <br/><h1>TODO LIST</h1><br/>

                    <input type='text' value={inputText} 

                placeholder='Enter a text' 

                onChange={inputEvent}/>

                    <button onClick={inputTextList}> + </button>

                    <ol>

                    {list.map((val, index) => {

                        return <TodoList key={index} 

                id={index} text={val} onSelect={deleteText}/>

                    })}

                    </ol>                   

                </div>

            </div>

        </>

    );

};

export default App;

TodoList.jsx

import React from "react";

const TodoList = (prop) => {

    return(

        <>

        <div className="todo">

        <i className="fa fa-times" onClick={ () => {

            prop.onSelect(prop.id);

        }}/>

        <li>{prop.text}</li> 

        </div>

        </>

    );

}

export default TodoList;

SIMPLE PRESIZED FORM IN REACT JS

 App.jsx

import React, { useState } from 'react'

import Card from './Cards';

import Sdata from './Sdata';

import "./index.css";

const App = () => {

    // Array Hook 

    const [showName, setShowName] = useState({

        fname : "",

        lname : ""

    });  

    

    const InputData = (event) => {

        console.log(event.target.value);

        console.log(event.target.name);

        const {name, value} = event.target;

        setShowName((x) => {

            console.log(x);

            return {

                ...x, // Spread Operator

                [name] : value

            };

        })

    }

    const Submit = (event) => {

        event.preventDefault();

        alert ("Form Submitted");

    }

    

    return(

        <>

        <h1 className='top_head'> REACTjs FORM </h1>

        <div>

            <form onSubmit={Submit}>

            <h1>Hello, {showName.fname} {showName.lname} !</h1>

            <input type='text' placeholder='your name' 

                onChange={InputData} 

                name='fname' value={showName.fname}/>

            <br/>

            <input type='text' placeholder='your last name' 

                onChange={InputData} 

                name='lname' value={showName.lname}/>

            <br/>

            <button type='submit' style={{backgroundColor:'#34495e', 

                fontSize:'22px'}}>Click<span>😃</span></button>

            </form>            

        </div>

        </>);

    };

    export default App;

SPREAD OPERATOR AND DESTRUCTURING ARRAY IN REACT JS

    

       //three dots(...) is called spread operator

    // Use of spread operator in Array

    const summerFlower = ["Rose","Sunflower"];

    const winterFlower = ["Marigold","Tulip","Lily"];

    const flower = [...summerFlower, ...winterFlower];

    console.log(flower);

    // Destructuring in Array

    const [flora, ...flwr] = [...summerFlower, ...winterFlower];

    console.log(flora);

    console.log(flwr);

    // Use of spread operator in object

    const fullForm = {

        "php" : "Hypertext Preprocessor",

        "html" : "Hyper Text Markup Language"

    }

    const fullFormMore = {

        ...fullForm,

        "css" : "Cascading Style Sheet"

    }

    console.log(fullFormMore);

REACT FORM

App.jsx

import React, { useState } from 'react'

import "./index.css";

const App = () => {

    // Array Hook 

    const [name, setName] = useState("");

    const [showName, setShowName] = useState();    

    const [lastName, setLastName] = useState("");

    const [showLastName, setShowLastName] = useState();

    

    const Submit = (event) => {

        event.preventDefault();

        setShowName(name);

        setShowLastName(lastName);

    }

    

    return(

        <>

        <h1 className='top_head'> REACT FORM</h1>

        <div>

            <form onSubmit={Submit}>

            <h1>Hello, {showName} {showLastName} !</h1>

            <input type='text' placeholder='your name' 

    onChange={InputDataOne} value={name}/>

            <br/>

            <input type='text' placeholder='your last name' 

    onChange={InputDataTwo} value={lastName}/>

            <br/>

            <button type='submit' style={{backgroundColor:

    '#34495e', fontSize:'22px'}}> Click 😃</button>

            </form>            

        </div>

        </>);

};

export default App;

USE OF HTTP REQUEST AND RESPONSE IN JSON

 index.json

{

    "employee" : [

        {

            "name" : "Suruchi Shukla",

            "post" : "Web Devloper",

            "department" : "IT"

        },

        {

            "name" : "Abhi Roy",

            "post" : "Tech Lead",

            "department" : "IT"

        }

    ]

}

index.html

<html>

<head>

<title>JSON Example</title>

</head>

<body>

<script>

//1> Server Connection establishment

var xhttp = new XMLHttpRequest();

//2> Request Service

xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {

        //3> Processing request

        coonsole.log(xhttp.responseText);

       // Typical action to be performed when the document is ready:

       var response = JSON.parse(employee);

       var employeeAll = response.employee;

       var showData = "";

       for(var i=0; i<employeeAll.length; i++){

        showData += employeeAll[i].name;      

       }

    document.write(showData+"<br/>");

    }

};

xhttp.open("GET", "index.json", true);

//4> Finish request Response Connection

xhttp.send();

</script>

</body>

</html>

SENDING JSON DATA(IN PHP), USE OF STRINGINFY() AND PARSE() JSON METHODS

 index.php

var jsonobject = {

        "name":"Suruchi Shukla",

        "post":"Software Developer",

        "age":"23"

    }

        //converting json data into string

        var sendData = JSON.stringify(jsonobject);

        //converting string to js object

        var parseData = JSON.parse(sendData);

        document.write(parseData.name);

        //sending data to php page

        window.location = "send.php?values="+sendData;

send.php

<?php

    if(isset($_GET['values'] $$ !empty ($_GET['values'])))

    {

        $showData = json_decode($_GET['values']);

        echo $showData -> name;

    }

?>

2D ARRAY AND 'FOR IN' LOOP IN JSON

 

// Key:Value Array in JSON

    var jsonKeyArrayObject = {

        "jsonKeyArray" : [

            {"country" : "INDIA", "state" : "Madhya Pradesh" },

            {"country" : "USA", "state" : "Washington" },

            {"country" : "UAE", "state" : "Dubai" },

        ]

    }

    document.write("<br/>"+jsonKeyArrayObject.jsonKeyArray[0].country);

    

    //for in loop

     for (x in jsonKeyArrayObject.jsonKeyArray){

        for (x_index in jsonKeyArrayObject.jsonKeyArray[x]){

            document.write(x_index+": "); //key

            document.write(jsonKeyArrayObject.

                    jsonKeyArray[x][x_index]+"<br/>"); //value

        }

    }