Scribd
Upload
15 views5 pages

Activity 11

Uploaded by

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

Activity 11

Uploaded by

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

Reg no.

12203256

Prince kumar

TODOS.JS

import React, { useState, useEffect }

from 'react';

import axios from 'axios';

function Todos() {

const [todos, setTodos] = useState([]);

const [loading, setLoading] =

useState(true);

const [error, setError] = useState(null);

useEffect(() => {

axios.get('https://jsonplaceholder.typic

ode.com/posts')

.then(response => {

setTodos(response.data);

setLoading(false);

})

.catch(error => {

setError("Error fetching data");

setLoading(false);

});

}, []);
if (loading) return <p>Loading...</p>;

if (error) return <p>{error}</p>;

return (

<div>

<h2>Todos</h2>

<ul>

{todos.map(todo => (

<li key={todo.id}>{todo.title}</li>

))}

</ul>

</div>

);

export default Todos;

ABOUT.JS

import React from 'react';

function About() {

return <h2>About This

Application</h2>;

}
export default About;

HOME.JS

import React from 'react';

function Home() {

return <h2>Welcome to the Home

Page</h2>;

export default Home;

APP.JS

import React from 'react';

import { BrowserRouter as Router,

Route, Routes, Link } from 'react-router-

dom';

import Home from

'./components/Home';

import About from

'./components/About';

import Todos from

'./components/Todos';

function App() {
return (

<Router>

<div>

<nav>

<ul>

<li><Link

to="/">Home</Link></li>

<li><Link

to="/about">About</Link></li>

<li><Link

to="/todos">Todos</Link></li>

</ul>

</nav>

<Routes>

<Route path="/" element={<Home

/>} />

<Route path="/about"

element={<About />} />

<Route path="/todos"

element={<Todos />} />

</Routes>

</div>

</Router>

);

export default App;

You might also like