Untitled
user_2477598
javascript
a year ago
4.4 kB
5
Indexable
import React, { Component } from "react"; class App extends Component { state = { newTitle: "", newDescription: "", newTopic: "", AddedAgenda: [ { title: "Angular", description: "Some description about the angular", "Understanding Versions", "Fundamentals"] }, { topics: ["Introduction", "Typescript", "Why Angular?", title: "Vue", description: "Some description about the vue", Bindings", "Component Interaction"] } topics: ["Introduction", "Javascript", "Why Vue?", "Vue 1, topicsArr: [], showAgendaBlock: false } changeFun e => { const value = e.target.value; const name e.target.name; this.setState({ [name]: value }) } topicFun() => { this.state.topicsArr.push(this.state.newTopic) this.setState({ newTopic: }); } agendaFun = () => { var agenda = { title: this.state.newTitle, description: this.state.newDescription, topics: this.state.topicsArr } this.setState({ newTitle:""}) this.setState({ newDescription: "" }) this.setState({ newTopics: "")) this.setState({ topicsArr: [] }) this.state.AddedAgenda.push(agenda) } formChec (e) => { e.preventDefault() } checkAgendaFun = () => { this.state.showAgendaBlock false? this.setState({ showAgendaBlock: true }): this.setState({ showAgendaBlock: false }) } render() { return ( <div> <h1 className="mx-5 mb-5">Agenda Manager</h1> {this.state, showAgendaBlock && <div className="container" role="addAgenda"> <button className="btn btn-info" onClick={this.checkAgendaFun} role="goToView">Click To View Agenda</button> <form onSubmit={this.formCheck}> <label className="form-label">Title</label> <div className="my-3"> <input type="text" name="newTitle" placeholder="Enter the title" className="form-control" role="inputTitle" value={this.state.newTitle} onChange={this.changeFun} /> <small className="text-danger" data- testid="invalidTitle"> (this.state.newTitle.trim().length === ? "Title is required":""} </small> </div> <div className="my-3"> <label className="form-label">Description</label> <input type="text" name="newDescription" placeholder="Enter the description" className="form-control" role="inputDescription" value={this.state.newDescription) onChange={this.changeFun) /> testid="invalidDescription"> <small className="text-danger" data- (this.state.newDescription.trim().length e? "Description is required": ""} </small> </div> <div className="my-3 w-50"> <label className="form-label">Enter topic</label> <input type="text" name="newTopic" testid="invalidTopic"> placeholder="Enter the topic" className="form-control" role="inputTopic" value-(this.state.newTopic) onChange={this.changeFun} /> (this.state.newTopic.trim().length==0&& <small className="text-danger" data- this.state.topicsArr.length e? "Topic is required":""} </small> </div> <button className="btn btn-success addAlign" role="addTopicBtn" onClick={this.topicFun} disabled={this.state.newTopic.trim().length 8)>+ Add Topic</button> <button className="btn btn-success submitAlign" role="submitAgendaBtn" onClick={this.agendaFun} disabled={this.state.newTitle.trim().length === 8 || this.state.newDescription.trim().length=== 0 || this.state.topicsArr.length 0) >Submit Agenda</button> testid="noTopicsMsg"> </form> {this.state.topicsArr.length === 0 && <div className="text-danger m1-2 mt-5" data- No Topics Added </div> } (this.state.topicsArr.length !== 0 && <div className="card my-3"> <div className="card-header">Added Topics</div> <div className="card-body"> <ul className="list-group"> { this.state.topicsArr.map(topic => { return ( <li className="list-group-item" role="topicList">(topic)</li> added</div> ) })} </ul> </div> <div className="card-footer">Refer the topics you </div> } </div> } {this.state.showAgendaBlock && <div className="container" role="viewAgenda"> <button className="btn btn-info" role="goToAdd" onClick={this.checkAgendaFun}>Click To Add Agenda</button> (this.state.AddedAgenda.map(agenda => { return ( <div className "card my-3" role="cards"> < div className="card-header"> (agenda.title) </div> <div className="card-body"> <ul className="list-group"> (agenda.topics.map(topic > { return ( <li className="list-group- item"> ) })} (topic) </li> 4/5 </ul> </div> <div className="card-footer"> {agenda.description) </div> ) })} </div> } </div> ); } } export default App;
Editor is loading...
Leave a Comment