Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 15, 2022 01:25 am GMT

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:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To