Following this code- What can I do for output if each line gape is very close, also box is very close (box means where you fill up). Also buttons gaps are close(For example- under the page you have three buttons- next, beack, edit). So how can I write each word has enough space and enough size. using react, please write a code export default class App extends React.Component { render() { return ( <div> <MainTitle /> <ContactForm /> </div> ) }} handleSubmit() {this.setState({display: true})}displayButtons() {const backvalue-"Back" />cinput type="button" onClick-{this.handleSubmit)cinput type="button" onClick-{this.handleSubmit)value-"Edit" />return back;}render() {return (ch1> Inventory Name)Storage TypeMax Item Capacity Resources Resource NameResource TypeMax Number of Resourcescinput name-"maxResource" value-{this.state.maxResource) onChange-(this.handleMaxResourceChange)className="form-control" id-"nameInput" placeholder-"Max Number of Resources" />Current Number of Resourcescinput type="button" onclick-{this.handleSubmit) value-"Submit form" />{this.state.display? this.displayButtons(): "*}}class MainTitle extends React.Component {render() {return (ch1> Add Inventory export default class App extends React.Component {render() {return (edivs import React from 'react';class Contactform extends React.Component (super (props);this.state {name: **storageType:maxitem:resourceName:maxResource:resourceType:currentResource:display: false};this.handleNameChange this.handleNameChange.bind(this);this.handlestorageTypeChangethis.handleStorageTypeChange.bind(this);this.handleMaxItemChange this.handleMaxItemChange.bind(this);this.handleResourceNameChange this.handleResourceNameChange.bind(this);this.handleResourceTypeChange this.handleResourceTypeChange.bind(this);this.handleMaxResourceChange this.handleMaxResourceChange.bind(this);this.handleCurrent ResourceChange this.handleCurrent ResourceChange.bind(this);this.handleSubmit}handleNameChange(event) {const target= event.target;const value - target.type = 'checkbox'? target.checked target.value;const name target.name;this.setState({name: value})console.log('Change detected. State updated" + namehandleStorageTypeChange(event)const target - event.target;const value - target.type =this.setState({storageType: value})this.setState({maxitem: value})handleMaxItemChange(event) {const targetevent.target;const value - target.type = 'checkbox'? target.checked: target.value;})this.handleSubmit.bind(this);handleResourceNameChange(event) {this.setState({resourceName: event.target.value})handleResourceTypeChange(event) {}{this.setState({resourceType: event.target.value'checkbox'? target.checked: target.value;})handleMaxResourceChange(event) {this.setState({maxResource: event.target.value})}handleCurrent ResourceChange(event) {this.setState({current Resource: event.target.valuehandleSubmit() {this.setState({dienlau trun+ value);

The code for the ReactJS (version 18.2) App.js component is given below with explanatory comments.…

Answered: Following this code- What can I do for…

Computer Networking: A Top-Down Approach (7th Edition)

7th Edition

ISBN:9780133594140

Author:James Kurose, Keith Ross

Publisher:James Kurose, Keith Ross

Chapter1: Computer Networks And The Internet

Section: Chapter Questions

Problem R1RQ: What is the difference between a host and an end system? List several different types of end...

See similar textbooks

Related questions

Question

Following this code- What can I do for output if each line gape is very close, also box is very close (box means where you fill up). Also buttons gaps are close(For example- under the page you have three buttons- next, beack, edit). So how can I write each word has enough space and enough size. using react, please write a code

export default class App extends React.Component {
render() {
return (
<div>
<MainTitle />
<ContactForm />
</div>
)
}

}