Fundamental Grammar

1. Basic class approach!

import React from "react";

export default class Ninjas extends Component {
  render () {
    return (
      //...      
    )
  }
}

or

class Ninjas extends Component {
  render () {
    return (
      //...      
    )
  }
}

export default Ninjas

2. functional approach

//properties is list format
const Ninjas = (props) => {
  const { ninjas } = props;
  return (
    //...
  )
}

export default Ninjas

which is same...

const Ninjas = ({ ninjas }) => {
  return (
    //...
  )
}

export default Ninjas

Access the state!

For access state, you have to use this.state[somthing...]
So for accessing state.name , in render(){}, call this.state.name!

import React from "react";

export default class Ninjas extends Component {
  state = {
    name: "Crystal",
    age: 35,
  };

  render () {
    return (
      <div className="app-content">
        <h1>Hey, ninjas</h1>
        <p>
          My name is: {this.state.name} and I am {this.state.age}
        </p>
      </div>           
    )
  }
}

Call the method! + Change the state

1. call the method

For calling the method in the render(){}, use this.method.
e.g. call handleCick method use this.handleClick

2. change the state

Don't directly change by this.state.name = "yoshi"
There is perfect method for change the state called, setState()!
if you want to do change the state just use this.setState({name: "yoshi", age: 25, ...})
you can add more key & value pair by just redifine state by setState()

import React from "react";

export default class Ninjas extends Component {
  state = {
    name: "Crystal",
    age: 35,
  };

  handleClick = (e) => {
    // console.log(e.target); // check the event!
    // this.state.name = "yoshi"; //baaaaaaaaaaaad!
    this.setState({ name: "Yoshi", age: 25 });
    // console.log(this.state); //check the state chagnged
  };

 handleMouseOver(e) {
    console.log(e.target, e.pageX);
  }

  handleCopy(e) {
    console.log("try being original for once");
  }

  render () {
    return (
      <div className="app-content">
        <h1>Hey, ninjas</h1>
        <p>
          My name is: {this.state.name} and I am {this.state.age}
        </p>
        <button onClick={this.handleClick}>Click Me</button>
        <button onMouseOver={this.handleMouseOver}>Hover me</button>
        <p onCopy={this.handleCopy}>What we think, we become</p>
      </div>           
    )
  }
}

Submit state

Let's send the state value by event trigger!
For taking action by not just clicking submitting button but with enter key, you can just add onSubmit attribute with function
For grab the value changes, just you onChange attribute

import React from "react";

export default class Ninjas extends Component {
  state = {
    name: "Crystal",
    age: 35,
  };

  handleChange = (e) => {
    this.setState({
      name: e.target.value,
    });
  };

  handleSubmit = (e) => {
    e.preventDefault();
    console.log("form submitted", this.state.name);
  };

  render () {
    return (
      <div className="app-content">
        <h1>My name is {this.state.name} </h1>
        <form onSubmit={this.handleSubmit}>
          <input type="text" onChange={this.handleChange} />
          <button>Submit</button>
        </form>
      </div>
    )
  }
}