Convert the code in function component to class component

I am having this react js code and I am trying to convert the following code into class component

I don’t know how to do that if someone can create a working sandbox then it will be helpful

import React, { useEffect, useState } from "react";
import "./styles.css";

const data = [
  {
    id: "1",
    name: "Jane",
    lastName: "Doe",
    age: "25"
  },
  {
    id: "2",
    name: "James",
    lastName: "Doe",
    age: "40"
  },
  {
    id: "3",
    name: "Alexa",
    lastName: "Doe",
    age: "27"
  },
  {
    id: "4",
    name: "Jane",
    lastName: "Brown",
    age: "40"
  }
];

export default function App() {
  const [peopleInfo, setPeopleInfo] = useState({});

  const toggleHandler = (item) => () => {
    setPeopleInfo((state) => ({
      ...state,
      [item.id]: state[item.id]
        ? null
        : {
            id: item.id,
            first: item.name,
            last: item.lastName,
            age: item.age
          }
    }));
  };

  useEffect(() => {
    console.log(peopleInfo);
  }, [peopleInfo]);

  return (
    <div className="App">
      <table>
        <tr>
          {data.map((item) => {
            return (
              <div
                key={item.id}
                style={{
                  display: "flex",
                  width: "150px"
                }}
              >
                <input
                  onChange={toggleHandler(item)}
                  checked={peopleInfo[item.id]}
                  style={{ margin: "20px" }}
                  type="checkbox"
                />
                <td style={{ margin: "20px" }}>{item.name}</td>
                <td style={{ margin: "20px" }}>{item.lastName}</td>
                <td style={{ margin: "20px" }}>{item.age}</td>
              </div>
            );
          })}
        </tr>
      </table>
    </div>
  );
}

I am having this react js code and I am trying to convert the following code into a class component

I don’t know how to do that if someone can create a working sandbox then it will be helpful
I am having this react js code and I am trying to convert the following code into a class component

I don’t know how to do that if someone can create a working sandbox then it will be helpful

>Solution :

1. The componentDidUpdate life cycle method corresponds to useEffect hook.

2. The render method should return the JSX to be rendered from the class component.

3. this.setState method is available by extending the Component class (from prototype chaining).

This will be the corresponding class component.

import React, { Component } from "react";

const data = [
  {
    id: "1",
    name: "Jane",
    lastName: "Doe",
    age: "25"
  },
  {
    id: "2",
    name: "James",
    lastName: "Doe",
    age: "40"
  },
  {
    id: "3",
    name: "Alexa",
    lastName: "Doe",
    age: "27"
  },
  {
    id: "4",
    name: "Jane",
    lastName: "Brown",
    age: "40"
  }
];

export default class App extends Component {
  state = {};

  toggleHandler = (item) => () => {
    this.setState((state) => ({
      ...state,
      [item.id]: state[item.id]
        ? null
        : {
            id: item.id,
            first: item.name,
            last: item.lastName,
            age: item.age
          }
    }));
  };

  componentDidUpdate() {
    console.log(this.state);
  }

  render() {
    return (
      <div className="App">
        <table>
          <tr>
            {data.map((item) => {
              return (
                <div
                  key={item.id}
                  style={{
                    display: "flex",
                    width: "150px"
                  }}
                >
                  <input
                    onChange={this.toggleHandler(item)}
                    checked={this.state[item.id]}
                    style={{ margin: "20px" }}
                    type="checkbox"
                  />
                  <td style={{ margin: "20px" }}>{item.name}</td>
                  <td style={{ margin: "20px" }}>{item.lastName}</td>
                  <td style={{ margin: "20px" }}>{item.age}</td>
                </div>
              );
            })}
          </tr>
        </table>
      </div>
    );
  }
}