Scribd Logo
Upload

Welcome to Scribd!

  • Lab 9

    Uploaded by

    ukbalaji_it
    4 views3 pages
    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.

    Original Description:

    Original Title

    Lab9

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    4 views3 pages

    Lab 9

    Uploaded by

    ukbalaji_it
    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.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 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