Untitled

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;