Как сделать эти функциональные компоненты классовыми?

Question

[hulktoster]

Нужно функциональные компоненты TableData.js и TableSearch.js сделать классовыми, один классовый компонент должен называться TableData, а другой TableSearch. Сложность для меня в том, что в оба компонента переданы объекты (деструктуриазция) и не знаю как правильно переделать компоненты.

TableSearch.js:

import React from "react";
export default ({ value, onChange, onSearch }) => {
  return (
    <div className="tableSearch">
        <input type="text" className="searchInput" onChange={onChange} value={value} placeholder="Search by flight"/>
        <button className="buttonSearch" onClick={() => onSearch(value)}>Search</button>
    </div>
  );
};

TableData.js:

import React from "react";
export default ({ data }) => (
     <div className="tableContainer">
  <table className="table">
    <thead>
      <tr>
        <th>Terminal</th>
        <th>Gate</th>
        <th>Time</th>
        <th>Destination</th>
        <th>Airline</th>
        <th>Flight</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {data.map(item => {
         const dt = new Date(item.actual);
         const mins = dt.getMinutes();
        return (
          <tr key={item.ID}>
            <td>{item.term}</td>
            <td>{item.gateNo}</td>
            <td>{`${dt.getHours()}:${mins < 10 ? '0' : ''}${mins}`}</td>
            <td>
              {item["airportToID.city_en"]
                ? item["airportToID.city_en"]
                : item["airportFromID.city_en"]}
            </td>
            <td>{item.airline.en.name}</td>
            <td>{item["planeTypeID.code"]}</td>
            <td>{item.status}</td>
          </tr>
        );
      })}
    </tbody>
  </table>
</div>
);

Также напишу в спойлере:

главный компонент App.js

import React from "react";
import { Component } from "react";
import { connect } from "react-redux";
import { fetchData } from "../actions";
import { filter } from "../actions";
import { setSearch } from "../actions";
import TableData from "../components/TableData";
import TableSearch from "../components/TableSearch";
import Header from "../components/Header";
import Footer from "../components/Footer";
import "../components/app.css";

export function searchFilter(search, data) {
  return data.filter(n => n["planeTypeID.code"].toLowerCase().includes(search));
}

const days = ["12-11-2019", "13-11-2019", "14-11-2019"];

class Root extends React.Component {
  componentDidMount() {
    this.props.onFetchData(days[this.props.propsReducer.day]);
  }

  render() {
    const { onFilter, onSetSearch, onFetchData } = this.props;
    const { search, shift, data, filteredData } = this.props.propsReducer;

    return (
      <div>
        <div className="content">
        
        <Header/>
        <br/>
        <div className="searchTitle">SEARCH FLIGHT</div>
             <br/>
        <TableSearch value={search} onChange={e => onSetSearch(e.target.value)} 
         onSearch={value => onFilter({ search: value })}/>
             <br/>
             <br/>
        <div className="buttonShift">
          {data && Object.keys(data).map(n => (
            <button data-shift={n} onClick={e => onFilter({ shift: e.target.dataset.shift })} className={n === shift ? "active" : "noActive"}>
                {n}
            </button>
          ))}
        </div>
          
        <div className="row">
        <span className="title">Yesterday: </span><span className="title">Today: </span><span className="title">Tomorrow: </span>
        </div>

        <div className="buttonDays">
          {days && days.map((day, i) => (
            <button  key={day} onClick={() => onFetchData(day)} className="buttonDaysOne">
                {day} 
            </button>
          ))}
        </div>

        {data && <TableData data={filteredData} />}
          </div>
        <Footer/>
      </div>
    );
  }
}

const mapStateToProps = state => state;

const matchDispatchToProps = dispatch => ({
    onFilter: args => dispatch(filter(args)),
    onSetSearch: search => dispatch(setSearch(search)),
    onFetchData: day => dispatch(fetchData(day))
});

export const ConnectedRoot = connect(
  mapStateToProps,
  matchDispatchToProps
)(Root);

Answer 1

[hzzzzl]

в оба компонента переданы обьекты (деструктуриазция) и не знаю как правильно переделать компоненты

const { value, onChange, onSearch } = this.props
const data = this.props.data

а дальше всё так же, просто ретурн положить еще в render()

Comments

[hulktoster]

спасибо) можете продемонстрировать хотя бы на TableSearch.js то что вы написали? Тоесть можете помочь изменить TableSearch.js на классовый компонент?

[hzzzzl]

import React from "react";
export default class Search extends React.Component {

render() {
  const { value, onChange, onSearch } = this.props

  return (
    <div className="tableSearch">
        <input type="text" className="searchInput" onChange={onChange} value={value} placeholder="Search by flight"/>
        <button className="buttonSearch" onClick={() => onSearch(value)}>Search</button>
    </div>
  );
};

}

если каких нибудь кавычек не хватает, то я не со зла

[hulktoster]

hzzzzl, спасибо)

Answer 2

[grinat]

А зачем тебе их классовыми делать? Как бэ будущее за функциональщиной(хуки и проч).