React and Immutable, Top Down

index.html

<div id="mainApp"></div>

React and Immutable, Top Down.markdown

React and Immutable, Top Down

React and immutable example of a simple top down, one way data flow, single state app.

A Pen by Brian Emil Hartz on CodePen.

License.

script.js

class MainApp extends React.Component {
  constructor(){
    super();
    this.state = {
      data: Immutable.Map({
        list: Immutable.List(['Item1'])
      })
    }
    this._updateList = this._updateList.bind(this);
  }
  _updateList(newValue){
    this.setState(previousState=>{
        let list = this.state.data.get('list');
        return {data: previousState.data.set('list', list.push(newValue))}
      }
    )
  }
  render(){
    let {list} = this.state.data.toJS();
    return (<div className="appContainer">
      <h3>mainApp</h3>
      <div className="flexContainer">
        <DisplayData list={list}/>
        <InputData onNewItem={this._updateList} nextItem={list.length + 1}/>
      </div>
    </div>)
  }
}

class DisplayData extends React.Component {
  render(){
      let $renderedFoos = this.props.list.map(item=>(<div>{item}</div>));
      return(
      <div className="displayData">
        <h4>DisplayData Component</h4>
        {$renderedFoos}
      </div>
    )
  }
}

 class InputData extends React.Component {
  render(){
      let nextItemText = 'Item' + this.props.nextItem;
      return(
      <div className="inputData">
        <h4>InputData Component</h4>
          <button className="addItem" onClick={()=>this.props.onNewItem(nextItemText)}>Add Item +</button>
        </div>
    )
  }
}
  
React.render(<MainApp/>, document.getElementById("mainApp"));

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.4/immutable.min.js"></script>

style.css

.appContainer {
  padding: 5px;
  border: solid 4px #eeeeee;
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
.flexContainer {
  display: flex;
  justify-content: space-around;
}

.displayData {
  background-color: lightgray;
  padding: 5px 5px 15px 5px;
  border-bottom: solid 4px darkgray;
  border-right: solid 4px darkgray;
  width: 45%
}

.inputData {
  background-color: lightblue;
  padding: 5px 5px 15px 5px;
  border-bottom: solid 4px darkblue;
  border-right: solid 4px darkblue;
  width: 45%
}

.addItem {
  border: none;
  border-bottom: solid 2px darkgray;
  border-right: solid 2px darkgray;
  background-color: white;
  cursor: pointer;
  &:hover {
    border: none;
    border-top: solid 2px darkgray;
    border-left: solid 2px darkgray;
    background-color: lightgray;
  }
  &:focus {
    outline:0;
  }
}