Scribd
Upload
258 views

PROJECT

This document contains code for a React Todo app including: 1) An index.js file that imports React and ReactDOM and renders an <App/> component. 2) An App.js file that defines the App component class containing state and methods to handle form submission and change events. 3) A HeaderComponent.jsx file that defines a navbar component. 4) A TodoInput.jsx file that defines a component to handle the todo form input and submission. 5) A TodoList.jsx file that currently just displays a heading but will eventually render the list of todos.

Uploaded by

MAHESH V
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
258 views

PROJECT

This document contains code for a React Todo app including: 1) An index.js file that imports React and ReactDOM and renders an <App/> component. 2) An App.js file that defines the App component class containing state and methods to handle form submission and change events. 3) A HeaderComponent.jsx file that defines a navbar component. 4) A TodoInput.jsx file that defines a component to handle the todo form input and submission. 5) A TodoList.jsx file that currently just displays a heading but will eventually render the list of todos.

Uploaded by

MAHESH V
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/ 4

index.

js

import React from 'react';


import ReactDOM from 'react-dom';
import "bootstrap/dist/css/bootstrap.css";
// import "bootstrap/dist/js/bootstrap";
import "popper.js/dist/popper";
import "jquery/dist/jquery";
import App from './App';

ReactDOM.render(<App/>,document.getElementById("root"));

app.js

import React,{Component,Fragment} from 'react';


import HeaderComponent from "./Components/HeaderComponent";
import TodoInput from "./TodoComponents/TodoInput";
import TodoList from "./TodoComponents/TodoList";
import { v4 as uuidv4 } from 'uuid';

class App extends Component {


constructor(props) {
super(props);
this.state = {
id:uuidv4(),
items: {},
item: "",
editTodo: false,
};
}

//form handlechange
handleChange = (e) => {
this.setState({item:e.target.value});
};

//form handleSubmit
handleSubmit = (e) => {
e.preventDefault();
console.log("form Submitted");
}
render() {
return (
<Fragment>
<header id="headerBlock">
<HeaderComponent />
</header>
<main className="container">
<TodoInput item={this.state.item}
handleChange={this.handleChange} handleSubmit={this.handleSubmit}/>
<TodoList />
</main>
<hr className="hr my-2" />
<footer className="container">
<p>Iam footer here</p>
</footer>
</Fragment>
);
};
};

export default App;

HeaderComponent.jsx

import React from "react";

const HeaderComponent = () => {


return (
<div>
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
<div className="container">
<a className="navbar-brand" href="#">
Todo App
</a>
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav ms-auto">
<li className="nav-item">
<a className="nav-link active" aria-current="page"
href="#">Home</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Features</a>
</li>

<li className="nav-item">
<a className="nav-link" href="#">Pricing</a>
</li>
<li className="nav-item">
<a className="nav-link disabled"
href="#"
tabIndex={-1}
aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
)
}
export default HeaderComponent;

TodoInput.jsx

import React, { Component, Fragment } from 'react';

class TodoInput extends Component {


constructor(props) {
super(props);
this.state = {};
}
render() {
let {handleChange,item,editTodo,handleSubmit} = this.props;
return (
<Fragment>
<section className="card col-md-6 mx-auto my-2">
<article className="card-body">
<form action="/" onSubmit={handleSubmit}>
<div className="form-group-inline">
<label htmlFor="">Add Item</label>
<input type="text"
id="item"
className="form-control"
placeholder="add item"
name="item"
required
value={item}
onChange={handleChange}/>
</div>
<div className="form-group-inline">
<button className={
editTodo
? "btn btn-warning my-3 float-right"
: "btn btn-success my-3 float-right"
}>
{editTodo ? "Edit Item" : "Add Item"}
</button>
</div>
</form>
</article>
</section>
</Fragment>
)
}
}

export default TodoInput;

TodoList.jsx

import React from 'react'

const TodoList = () => {


return (
<div>
<h2>I am Todo List</h2>
</div>
);
};

export default TodoList;

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy