Useful snippets from React in Flipdflops

plot.js

/**
 * This component should render a plot with Plotly, taking these three props:
 *
 * - xData: the data to be rendered on the x-axis as an array
 * - yData: The data to be rendered on the y-axis as an array
 * - type:  The type of plot we want Plotly to render
 *
 * To see an example of how you should use Plotly look at the index.html file in the public/ folder.
 * (and feel free to delete the code in there)
 */
import React, { Component } from 'react';
import Plotly from 'plotly.js/dist/plotly.js';

const redrawPlot = (element, xData, yData, type) => {
  Plotly.newPlot(element, [{
    x: xData,
    y: yData,
    type: type
  }], {
    margin: {
      t: 0, r: 0, l: 30
    },
    xaxis: {
      gridcolor: 'transparent'
    }
  }, {
    displayModeBar: false
  });
}

class Plot extends Component {

  shouldComponentUpdate(nextProps) {
    //if some props are changed return true

    if (this.props.yData !== nextProps.yData) {
      console.log('is changed');
      return true;
    }
    if (this.props.xData !== nextProps.xData) {
      console.log('is changed');
      return true;
    }
    console.log('is not changed');

    //else don't
    return false;
  }

  componentDidMount(){
    console.log('did mount');
    const { xData, yData, type } = this.props;
    redrawPlot(this.element, xData, yData, type);
  }

  componentDidUpdate() {
    const { xData, yData, type } = this.props;
    redrawPlot(this.element, xData, yData, type);
  }



  render() {
		return (
      <div
        ref={(element) => {
    			this.element = element;
    		}}
      />
    )
  }
}

export default Plot;

plotAlternative.js

/**
 * This component should render a plot with Plotly, taking these three props:
 *
 * - xData: the data to be rendered on the x-axis as an array
 * - yData: The data to be rendered on the y-axis as an array
 * - type:  The type of plot we want Plotly to render
 *
 * To see an example of how you should use Plotly look at the index.html file in the public/ folder.
 * (and feel free to delete the code in there)
 */
import React, { Component } from 'react';
import Plotly from 'plotly.js/dist/plotly.js';

class Plot extends Component {
	componentDidMount() {
		this.drawPlot();
	}

	componentDidUpdate() {
		this.drawPlot();
	}

	shouldComponentUpdate(nextProps) {
		return this.props.xData !== nextProps.xData || this.props.yData !== nextProps.yData;
	}

	drawPlot = () => {
		Plotly.newPlot(this.div, [{
			x: this.props.xData,
			y: this.props.yData,
			type: this.props.type,
		}], {
			margin: {
				t: 0, r: 0, l: 30
			},
			xaxis: {
				gridcolor: 'transparent'
			}
		}, {
			displayModeBar: false
		});
	}

	render() {
		return (
			<div className="plot-wrapper">
				<div ref={comp => this.div = comp} />
			</div>
		)
	}
}

export default Plot;

updateWithoutRedux.js

/**
 * This component should manage the todo items, letting users check existing ones and add new ones
 */
import React, { Component } from 'react';
import TodoItem from './TodoItem';
import TodoInput from './TodoInput';

class TodoList extends Component {

  constructor(props) {
		super(props);
    //create new state:
		this.state = {
      items: props.items,
      newInput: ''
		};
	}

  updateInput = (event) => {
    //Update the state
		this.setState({
			newInput: event.target.value
    });
	}

  addToList = (event) => {
    //stop page from reloading
    event.preventDefault();

    // create newItem
    const newItem = {
      checked: false,
      text: this.state.newInput
    }

    //update the state
    this.setState({
      items: [...this.state.items, newItem],
      newInput: '' //reset the input
    })
  }

  updateCheckmark = (event, index) => { //function
    this.setState((prevState) => { //we update setstate
      //create a new const where we map through all the elements in the array
      const newItems = prevState.items.map( (item, itemsIndex ) => {
        if (index === itemsIndex) { //if the index passed to updateCheckmark is the same as prevState Items
          return {
            text: item.text, //copy the old property
            checked: !item.checked //make it opposite of what it was
          }
        } else {
          return item; //just keep the same property
        }
      })

      return {
        items: newItems //assign the new const to items
      }
    })

  }


	render() {
		return (
      <div>
  			<ul>
  				{this.state.items.map((item, index) => (
  					<li
              key={index}>
                <TodoItem
                  text={item.text}
                  checked={item.checked}
                  updateCheckmark={(event) => { //create an anonymous function so that we can pass an index.
                    this.updateCheckmark(event, index) //else we could have just said: updateCheckmark={this.updateCheckmark}
                  }}
                />
            </li>
  				))}
  			</ul>
        <form onSubmit={this.addToList}>
          <TodoInput updateInput={this.updateInput} newValue={this.state.newInput} />
        </form>
      </div>
		)
	}
}

export default TodoList;