Scribd
Upload
18 views6 pages

React All

The document contains multiple React component examples that demonstrate the creation of forms and handling user input using state management. It includes functionalities for submitting data, displaying lists, and utilizing hooks like useState and useEffect. Additionally, there are examples of routing with React Router and fetching data from an API using Axios.

Uploaded by

faxi.dev06
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
18 views6 pages

React All

The document contains multiple React component examples that demonstrate the creation of forms and handling user input using state management. It includes functionalities for submitting data, displaying lists, and utilizing hooks like useState and useEffect. Additionally, there are examples of routing with React Router and fetching data from an API using Axios.

Uploaded by

faxi.dev06
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 6

// import React, { useState } from 'react'

// const App = () => {


// const [toDoList, setToDoList] = useState({
// name: "",
// email: ""
// })

// const [list, setList] = useState("")

// const submitHandler = (e) => {


// e.preventDefault()
// setList(toDoList)
// }

// return (
// <div>
// <h1> #To Do List. </h1>
// <hr />
// <br />
// <form onSubmit={submitHandler}>
// toDoList""
// <input type='text' placeholder='Type to do..' value={toDoList.name}
onChange={(e) => setToDoList({ ...toDoList, name: e.target.value })} />
// <input type='text' placeholder='Type to do..' value={toDoList.email}
onChange={(e) => setToDoList({ ...toDoList, email: e.target.value })} />
// <button type='submit'>Submit</button>
// </form>

// <h1>{list.name}</h1>
// <h1>{list.email}</h1>

// </div>
// )
// }

// export default App

// import React, { useState } from 'react'

// const App = () => {


// const [toDoList,setToDoList] = useState({
// name: "",
// email: "",
// place: "",
// gender: ""
// })

// const [list, setList] = useState("")

// const submitHandler = (e) => {


// e.preventDefault()
// setList(toDoList)
// // toDoList("")
// setToDoList({
// name: " ",
// email: " ",
// place: " ",
// gender: " "
// })

// }
// console.log(toDoList)

// return (
// <div>
// <h1>ToDo List</h1>
// <form onSubmit={submitHandler}>
// Name: <input placeholder='Type name' value={toDoList.name}
onChange={(e) => setToDoList({...toDoList, name: e.target.value})}/>
// <br/>
// E-mail: <input placeholder='Email' value={toDoList.email} onChange={(e)
=> setToDoList({...toDoList, email: e.target.value})}/>
// <br/>
// Place: <input placeholder='Place' value={toDoList.place} onChange={(e)
=> setToDoList({...toDoList, place: e.target.value})}/>
// <br/>
// Gender: <input placeholder='Gender' value={toDoList.gender}
onChange={(e) => setToDoList({...toDoList, gender: e.target.value})}/>

// <button type='submit'>Submit</button>

// </form>

// <h1>{list.name}</h1>
// <h1>{list.email}</h1>
// <h1>{list.place}</h1>
// <h1>{list.gender}</h1>

// </div>
// )
// }

// export default App

// ................................................................................
.........................................

// "use client";
// import React, { useState } from "react";

// const Page = () => {


// const [formData, setFormData] = useState({
// name: "",
// email: "",
// });

// const [dataArray, setDataArray] = useState([]);

// const submitHandler = (e) => {


// e.preventDefault();
// setDataArray([...dataArray, formData]);
// setFormData({ name: "", email: "" });
// };

// return (
// <div>
// <h1>todo list</h1>
// <form onSubmit={submitHandler}>
// <input
// type="text"
// value={formData.name}
// placeholder="Name"
// onChange={(e) => setFormData({ ...formData, name: e.target.value })}
// />
// <input
// type="email"
// value={formData.email}
// placeholder="Email"
// onChange={(e) => setFormData({ ...formData, email: e.target.value })}
// />
// <button type="submit">Submit</button>
// </form>

// {dataArray.map((e, i) => (
// <div>
// <h1>{e.name}</h1>
// <h1>{e.email}</h1>
// </div>
// ))}
// </div>
// );
// };

// export default Page;

// import React,{ useState } from 'react'

// const App = () => {


// const [data,setData] = useState({
// name: "",
// email: "",
// state: ""
// })

// const [first, setfirst] = useState([])

// const submitHandler = (e) => {


// e.preventDefault();
// setfirst([...first, data]);300
// setData({
// name: "",
// email: "",
// state: ""
// })
// }

// console.log(data)

// return (

// <div>

// <h1>Intro form</h1>
// <form onSubmit={submitHandler}>
// Name: <input type='text' placeholder='Type name' value={data.name}
onChange={(e) => setData({...data, name: e.target.value})}/> <br/>
// Email: <input type='text' placeholder='Type email' value={data.email}
onChange={(e) => setData({...data, email: e.target.value})}/><br/>
// State: <input type='text' placeholder='Type state' value={data.state}
onChange={(e) => setData({...data, state: e.target.value})}/>
// <button type='submit'>Submit</button>
// </form>

// {/* {first.map((e,i) => (


// <div>
// <h1>{e.name}</h1>
// <h1>{e.email}</h1>
// <h1>{e.state}</h1>

// </div>
// ))} */}
// </div>
// )
// }

// export default App

// priops and drilling: send parent data into child makming new component.

// import React,{ useState } from 'react'

// import Child from './child'

// const App = () => {


// const [data,setData] = useState({
// name: "",
// email: "",
// state: ""
// })

// const [first, setfirst] = useState([])

// // const chilData = (new) => {


// // setData(new);
// // }

// const submitHandler = (e) => {


// e.preventDefault();
// setfirst([...first, data]);300
// setData({
// name: "",
// email: "",
// state: ""
// })
// }

// console.log(data)

// return (

// // <Child/>

// <div>

// {/* <Child/> */}


// <Child data={data}/>

// <h1>Intro form</h1>
// <form onSubmit={submitHandler}>
// Name: <input type='text' placeholder='Type name' value={data.name}
onChange={(e) => setData({...data, name: e.target.value})}/> <br/>
// Email: <input type='text' placeholder='Type email' value={data.email}
onChange={(e) => setData({...data, email: e.target.value})}/><br/>
// State: <input type='text' placeholder='Type state' value={data.state}
onChange={(e) => setData({...data, state: e.target.value})}/>
// <button type='submit'>Submit</button>
// </form>

// {/* {first.map((e,i) => (


// <div>
// <h1>{e.name}</h1>
// <h1>{e.email}</h1>
// <h1>{e.state}</h1>

// </div>
// ))} */}

// </div>
// )
// }

// export default App

// import axios from "axios";


// import React, { useEffect, useState} from "react";

// const Page = () => {

// const [details,setDetails] = useState([])


// console.log(details);
// useEffect(() => {
// getData();
// }, []);

// const getData = async () => {


// const res = await axios.get("https://jsonplaceholder.typicode.com/posts");
// // console.log(res);
// setDetails(res.data);
// };

// useEffect(() => {
// getData();
// }, []);

// return (
// <div>
// <h1>Axios api data</h1>
// {details.map((e,i) => (
// <h1>{e.body}</h1>
// ))}
// </div>
// )
// };

// export default Page

// import React from "react";

// import About from "./components/About";


// import Contact from "./components/Contact";
// import Home from "./components/Home";
// import { Route, Router, Routes } from "react-router-dom";

// const App = () => {


// return (
// <Router>
// <Routes>
// <Route path="/" element={<Home />} />
// <Route path="/about" element={<About />} />
// <Route path="/contact" element={<Contact />} />
// </Routes>
// </Router>
// );
// };

// export default App;

You might also like