Cacher is the code snippet organizer for pro developers

class javascript extends React.Component {
  constructor() {
    super()
    this.state = {
      selectedOption: null,
    }
  }

  handleChange = selectedOption => {
    this.setState({ selectedOption })
  }

  //　Initialized selected option
  handleReset = () => {
    this.setState({ selectedOption: (this.state.selectedOption = null) })
  }

  render() {
    const { data } = this.props
    const { selectedOption } = this.state

    //　get select option from airtable master and make it array(object)
    const selectValue = data.master.edges.map(edge => {
      return {
        value: edge.node.data.Name,
        label: edge.node.data.Name,
      }
    })

    return (
      <Layout>
        <SEO title="Javascript&RestAPI Tutorial Selection" />

        <div className={styles.container}>
          <TutsHeader />

          <div className={styles.selectBlock}>
            <Select
              value={selectedOption}
              onChange={this.handleChange}
              options={selectValue}
              className={styles.selector}
            />
            <button onClick={this.handleReset} className={styles.resetBtn}>
              Reset
            </button>
          </div>

          <Grid container>
            {data.allAirtable.edges
              .filter(edges =>
                !selectedOption
                  ? edges.node.data.category
                  : edges.node.data.category === selectedOption.value
              )
              .map(edges => {
                return <PageGrid grids={edges} key={edges.node.id} />
              })}
          </Grid>
        </div>
      </Layout>
    )
  }
}