Scribd
Upload
14 views

Lab 9

The document contains code for a React app that fetches todo items from an API. It includes: 1) An index.html file that sets up the basic page. 2) An index.js file that renders the app and includes the Test component. 3) A Test.js file that defines the Test component class with state to store todos and error messages. It handles form submission and API calls to fetch todos based on the input ID. The rendered output maps over the todos or displays an error.

Uploaded by

ukbalaji_it
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
14 views

Lab 9

The document contains code for a React app that fetches todo items from an API. It includes: 1) An index.html file that sets up the basic page. 2) An index.js file that renders the app and includes the Test component. 3) A Test.js file that defines the Test component class with state to store todos and error messages. It handles form submission and API calls to fetch todos based on the input ID. The rendered output maps over the todos or displays an error.

Uploaded by

ukbalaji_it
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Program :

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body><div id="root"></div> </body>
</html>

index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import Test from './Test';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Test/>
</React.StrictMode>
);
reportWebVitals();

Test.js
import React, { Component } from 'react'
import axios from 'axios'
export default class Test extends Component {
constructor(props) {
super(props)

this.state = {
todos:[],
errorMessage:' ',
inputId:0
}

this.handleSubmit=this.handleSubmit.bind(this)
this.handleChange=this.handleChange.bind(this)
}
handleChange(event)
{

console.log(event.target.value);
this.setState({inputId:event.target.value})
console.log("---"+this.state.inputId)

}
handleSubmit(event)
{
event.preventDefault();

axios.get('https://jsonplaceholder.typicode.com/todos?id='+this.state.
inputId)
.then(response=>
{
console.log(response.data);
this.setState({todos:response.data})

}
)
.catch(error=>console.log(error))
}
render()
{
const { todos, errorMessage,inputId } = this.state
return (
<div>
<form onSubmit={this.handleSubmit}>
<h1> Enter User Id</h1>
<input type="text" name="inputId"
onChange={this.handleChange}/>
<br></br>
<input type="submit" onChange={this.handleSubmit}/>
</form>
<div><h1>Todo List</h1>
{
todos.length ?
todos.map(todo=>

<div key={todo.id}>
<h2>Id : {todo.id} </h2>
<h2>User id : {todo.userId} </h2>
<h2>Title : {todo.title} </h2>
<h2>Completed : {todo.completed?"true":"false"}</h2>
<hr></hr>
</div>

):
null

errorMessage? <div> {errorMessage}</div>:null

}
</div>
</div>
)
}

Output

You might also like