Camilo J. Kawerín camilokawerin

## utils.js
/*
 * Copy this file to your /support directory and edit index.js to add:
 *
 * import './utils'
 *
 * Usage:
 *
 * cy.logObj(someObjVar)
 *
 */

## README.md

      
              2 files
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                camilokawerin
                / README.md
            
            
              Last active
              June 22, 2020 20:45
            
              
                How to make AJAX requests to update state from props in ReactJS components
              
          
    How to make AJAX requests to update state from props in ReactJS components

AJAX request should be done at the componentDidMount hook when you need to load data inmediatelly after the component is first rendered. When you wish to refresh the data after some props changed, you must use the componentDidUpdate hook.
But you'll have to take hand of another three lifecycle hooks to avoid starting an infinite loop of requests/updates. Assuming you wish to update a posts list based on props.category changes:

state should have two properties, category and currentCategory, set to null on the component's constructor;
getDerivedStateFromProps is needed to update state.category from the new props.category;
shouldComponentUpdate is needed to compare both state.category and state.currentCategory to determine if the component should be updated;
getSnapshotBeforeUpdate is needed to determine if componentDidUpdate should make an AJAX requ


## mixins.less
// shapes

.triangle() {
  content: "";
  display: inline-block;
  border-style: solid;
  border-color: transparent;
  width: 0;
  height: 0;
}

## index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="TodoMVC Guide 3.0 Start">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
html,
body {

## gist:9662955
// Based on Bootstrap gradient mixin
// http://getbootstrap.com/css/#less

// Faux columns technique by Dan Cederholm
// http://alistapart.com/article/fauxcolumns

// Fluid Width Equal Height Columns by Chris Coyier
// http://css-tricks.com/fluid-width-equal-height-columns/

.two-faux-colums(@col-one-color: #efefef; @col-one-width: 25%; @col-two-color: #fff; @border-color: #ebebeb; @border-width: 1px) {

## localstorage.js
<script>
  // test for localStorage support
  if(('localStorage' in window) && window['localStorage'] !== null){

  var f = document.getElementById('mainform');
  // test with PHP if the form was sent (the submit button has the name "sent")
  <?php if(isset($_POST['sent'])){?>

    // get the HTML of the form and cache it in the property "state"
      localStorage.setItem('state',f.innerHTML);
	/*
	* Copy this file to your /support directory and edit index.js to add:
	*
	* import './utils'
	*
	* Usage:
	*
	* cy.logObj(someObjVar)
	*
	*/
	// shapes

	.triangle() {
	content: "";
	display: inline-block;
	border-style: solid;
	border-color: transparent;
	width: 0;
	height: 0;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="TodoMVC Guide 3.0 Start">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<style id="jsbin-css">
	html,
	body {
	// Based on Bootstrap gradient mixin
	// http://getbootstrap.com/css/#less

	// Faux columns technique by Dan Cederholm
	// http://alistapart.com/article/fauxcolumns

	// Fluid Width Equal Height Columns by Chris Coyier
	// http://css-tricks.com/fluid-width-equal-height-columns/

	.two-faux-colums(@col-one-color: #efefef; @col-one-width: 25%; @col-two-color: #fff; @border-color: #ebebeb; @border-width: 1px) {
	<script>
	// test for localStorage support
	if(('localStorage' in window) && window['localStorage'] !== null){

	var f = document.getElementById('mainform');
	// test with PHP if the form was sent (the submit button has the name "sent")
	<?php if(isset($_POST['sent'])){?>

	// get the HTML of the form and cache it in the property "state"
	localStorage.setItem('state',f.innerHTML);