An Interest In:
Web News this Week
- April 27, 2024
- April 26, 2024
- April 25, 2024
- April 24, 2024
- April 23, 2024
- April 22, 2024
- April 21, 2024
April 15, 2022 01:25 am GMT
Original Link: https://dev.to/readymadecode/create-dynamic-lists-in-react-13lj
Create dynamic lists in React
Dynamic lists are the lists that automatically add or remove based on the conditions. They are easy to set up and they maintain themselves, which makes them a great choice for building lists around information that changes frequently.
Create dynamic lists in React
class App extends React.Component{ state = { lists : { 'list-1' : 'PHP', 'list-2' : 'Wordpress' } } addList = (list) => { var timestamp = (new Date()).getTime(); this.state.lists['list-' + timestamp ] = list; this.setState({ lists : this.state.lists }); } removeList = (listKey) => { delete this.state.lists[listKey]; this.setState({ lists : this.state.lists }); } render() { return ( <div className="component-wrapper"> <ItemList lists={this.state.lists} removeList={this.removeList}/> <AddListForm addList={this.addList} /> </div> ); } } class ItemList extends React.Component{ render () { return ( <div className="container"> <ul className="list-group text-center"> { Object.keys(this.props.lists).map(function(key) { return <li className="list-group-item list-group-item-info">{this.props.lists[key]} <span onClick={()=>this.props.removeList(key)}>X</span></li> }.bind(this)) } </ul> </div> ); } } class AddListForm extends React.Component{ createList = (e) => { e.preventDefault(); var list = this.refs.listName.value; if(list.length > 0) { this.props.addList(list); } this.refs.listForm.reset(); } render = () => { return( <form className="form-inline" ref="listForm" onSubmit={this.createList}> <div className="form-group"> <label for="listItem"> List Name <input type="text" id="listItem" className="form-control" placeholder="e.x.lemmon" ref="listName" /> </label> </div> <button type="submit" className="btn btn-primary">Add List</button> </form> ) } } React.render( <App />, document.getElementById('app') );
Please like share subscribe and give positive feedback to motivate me to write more for you.
For more tutorials please visit my website.
Thanks:)
Happy Coding:)
Original Link: https://dev.to/readymadecode/create-dynamic-lists-in-react-13lj
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To