States

State is similar to props, but it is private and fully controlled by the component.

State is basically just data, and there’s two types of state.

1. Component level state
2. App level or global state.

Component level is just data that is associated with that one specific component. So you set your your state in the component, and that’s it. No other components need to use that data.

State

state = {
    id: 'id',
    login: 'mojombo',
    avatar_url: 'https://avatars.githubusercontent.com/u/1?v=4',
    html_url: 'https://github.com/mojombo',
  };

Render

render() {
    return (
      <div className='card text-center'>
        <img
          className='round-img'
          src={this.state.avatar_url}
          alt={this.state.login}
          style={{ width: '60px' }}
        />
        <h3 className='card-title text-center'>{this.state.login}</h3>
        <a className='btn btn-dark btn-sm my-1' href={this.state.html_url}>
          More
        </a>
      </div>
    );
  }