React JS Cheatsheet.

_REACT JS CHEATSHEET

This is my personal reference for React JS.

Access-JSON-State-Array

JSON.stringify(this.state.data)

add-value-to-array-state

this.setState({ 
    arrayvar: this.state.arrayvar.concat([newelement])
})

fire-event-on-current-item

onClick={() => this.afunction(index)}
//afunction is a function name

handle-function-on-current-element

handleRemove : function(index){
  var newData = this.state.items.slice(); //copy array
  newData.splice(index, 1); //remove element
  this.setState({items: newData}); //update state
  console.log(this.state.items[1])
 index.currentTarget.style.backgroundColor = 'red';
}

map-array-to-DOM-elements

var ThisComponent = React.creacteClass({
  render: function(){
    var listComponents = this.state.data.map((item,index) => {
      <li key={id}> {item.arrayobject} </li>
    });
    return(
    <div>
      {listComponents}
    </div>
    );  
  }
});
// item,index has to be in that order

pass-button-click-as-prop-to-parent-function.js

var ChildComponent = React.createClass({
  render: function() {
    return (
      <div>
        <button onClick={this.performMagicClick}>Do Magic</button>
      </div>
    );
  }
});

var ParentComponent = React.createClass({
  performMagic: function() {
    alert('TAADAH!');
  },

  render: function() {
    return (
      <div>
        <ChildComponent performMagicClick={this.performMagic}/>
      </div>
    );
  }
});

ReactDOM.render(
  <ParentComponent />,
  document.getElementById('container')
);

return-value-of-input-field

function(event){
  event.target.value
}

simple-true-false-boolean-toggle-for-state

var StateComponent = React.createClass({
  getInitialState: function() {
    return {currentState: false};
  },
  handleClick : function() {
      this.setState({currentState: !this.state.currentState});
  },
  render: function() {
    
    return (
      <div>
        <h1> This is my current State : {this.state.currentState ? "Chill" : "Not Chill"}</h1>
        <button type="button" className="btn btn-primary"
          onClick={this.handleClick} >Change State</button>
        </div>
    )    
  }
});

this-target-function

  aFunction : function(event){
    event.target //You can reference any element using event.target
    
    //ID name
    event.target.id
    
    //className
    event.target.className
    
    //Input value
    event.target.value
    
  }

update-JSON-array-of-current-component

  testFunc : function(index){
    var str=this.state.data;
    str[index].title="Tokyo";
    this.setState({data:str});
    console.log(JSON.stringify(this.state.data))
  }