Question

0

130

Views

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

about 4 years ago · Juan Pablo Isaza

2 answers

Answer question

0

ComponentDidUpdate will be called when each it rerender with state update.

import "./styles.css";
import React 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 React.Component {
  state = {
    peopleInfo: {}
  };

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

  componentDidUpdate() {
    console.log(this.state.peopleInfo);
  }
  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.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>
    );
  }
}

CodeSandBox

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-04T01:39:43.640Z

The componentDidUpdate life cycle method corresponds to useEffect hook.
The render method should return the JSX to be rendered from the class component.
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>
    );
  }
}

0

130

Convert the code in function component to class component

2 answers

0

0

Find remote jobs

Andres GPT