Fresco Play Milestone Challenge Web Development Onsen UI List Generator Hands-on Solution | TCS Fresco Play

Disclaimer: The primary purpose of providing this solution is to assist and support anyone who are unable to complete these courses due to a technical issue or a lack of expertise. This website's information or data are solely for the purpose of knowledge and education.

Make an effort to understand these solutions and apply them to your Hands-On difficulties. (It is not advisable that copy and paste these solutions).

All Question of the MCQs Present Below for Ease Use Ctrl + F with the question name to find the Question. All the Best!

If you found answer for any of the questions is wrong. Please do mention in the comment section, could be useful for others. Thanks!

Fresco play Milestone Challenge  Web Development Onsen UI List Generator 

Write the below code in App.js.

import React, { Component } from "react"; import {

Page, Button, Toolbar, ListHeader, ListItem, List,

} from "react-onsenui";

// add id='btn-increment' to increment button class App extends Component {

state = { counter: 0,

counterArray: [],

};

onButtonClick = (e) => { console.log(e); this.setState((state) => { return {

counter: state.counter + 1,

counterArray: [...state.counterArray, state.counter + 1],

};

});

};

 

render() { console.log(this.state);

return (

<Page renderToolbar={() => (

<Toolbar>

<div className="center">List Generator</div>

</Toolbar>

)}

> 

<Button modifier="large--cta"

onClick={this.onButtonClick} id="btn-increment"

> 

{this.state.counter.toString()}

</Button>

<List dataSource={this.state.counterArray} renderHeader={() => (

<ListHeader style={{ fontSize: 15 }} className="testClass"> NUMBERS

</ListHeader>

)}

renderRow={(row, idx) => <ListItem> {row} </ListItem>}

/>

</Page>

);

}

}

export default App;