State and props

State is a powerful way to store data in DoksJS components. It allows you to create components that are more dynamic and interactive. Props are a way to pass data to DoksJS components from their parent components. This can be useful for sharing data between components or for passing data into a component that needs it to function.

• State is data that is specific to the component and that can be changed by the component.

• Props are data that is passed to the component from its parent component and that cannot be changed by the component.

Here is an example of a DoksJS component that uses state:

class MyComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0,
    };
  }

  handleClick() {
    this.setState({
      count: this.state.count + 1,
    });
  }

  render() {
    return (
      <div>
        The count is: {this.state.count}
        <button onClick={this.handleClick}>Click me!</button>
      </div>
    );
  }
}

export default MyComponent;

This component has a state variable called count. The count variable tracks the number of times the button has been clicked. The handleClick() method is called when the button is clicked and it increments the count variable. The render() method renders the component's HTML markup and sets the count prop to the value of the count variable.

Here is an example of a DoksJS component that uses props:

class MyComponent extends Component {
  render() {
    const name = this.props.name;

    return (
      <div>
        Hello, {name}!
      </div>
    );
  }
}

export default MyComponent;

This component uses the name prop to render the name of the user. The name prop is passed to the component from its parent component.