import React from "react";

export default class MyState extends React.Component {
  constructor() {
    super();
    this.state = {
      data: "Data from db",
      version: 18.2,
      flag: true,
      subs: ["ML", "Maths", "AI", "UI"],
      obj: {
        fe: "React JS",
        be: "node js",
        db: "MongoDb",
      },
      products: [
        { p_id: 111, p_name: "p_one", p_cost: 10000 },
        { p_id: 222, p_name: "p_two", p_cost: 20000 },
        { p_id: 333, p_name: "p_three", p_cost: 30000 },
        { p_id: 444, p_name: "p_four", p_cost: 40000 },
        { p_id: 555, p_name: "p_five", p_cost: 50000 },
      ],
    };
  }
  render() {
    return (
      <div>
        <h1>Welcome</h1>
        <h2 style={{ color: "green" }}>{this.state.data}</h2>
        <h2 style={{ color: "red" }}>{this.state.version}</h2>
        <h2 style={{ color: "red" }}>{String(this.state.flag)}</h2>
        <h2 style={{ color: "red" }}>{this.state.subs}</h2>
        <h2 style={{ color: "red" }}>{JSON.stringify(this.state.obj)}</h2>
        <table className="table table-sm table-dark table-striped table-hover table-bordered w-50 mx auto">
          <thead>
            <tr>
              <th>S.no</th>
              <th>p_id</th>
              <th>p_name</th>
              <th>p_cost</th>
            </tr>
          </thead>
          <tbody>
            {this.state.products.map((e, i) => (
              <tr>
                <td>{i + 1}</td>
                <td>{e.p_id}</td>
                <td>{e.p_name}</td>
                <td>{e.p_cost}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}