Implementing Class - REACT

Question

Hello fellow coding friends,

I have a small problem. First of all I am very new to REACT and Typescript otherwise I think it would be no problem to solve this myself. But i need the following code to be implemented as a class (as I otherwise would need to duplicate this code):

const CustomFilterComponent = (props): ReactElement => {
const [selectedVal, setSelectedVal] = useState(0);

function handleChange(e): void {
    const val = e.target.value;
    setSelectedVal(val);
    props.onFilterChanged(props.columnDef.tableData.id, val);
}

return (
    <th>
        <Select  value={selectedVal} onChange={handleChange}>
            <MenuItem value={"0"} disabled>
                Filter
            </MenuItem>
            {phpVersions.map((phpVersion): ReactElement => {
                return (
                    <MenuItem value={phpVersion}>{phpVersion}</MenuItem>
                )
            })}
        </Select>
    </th>
);
};

I need this to be a class as I am making a filter for php versions in my example. But I also need this for symfony as a reference. This means I would need to change the return property. At the moment i call my method like this:

const newColumns = [...this.state.columns];
newColumns[3].filterComponent = CustomFilterComponent;
this.setState({columns: newColumns});

I would very much appreciate your help.

so what do you actually need just converting above functional component to the class component? — tmhao2005
– tmhao2005, Commented Aug 10, 2020 at 6:09

tmhao2005 · Accepted Answer · 2020-08-10 06:34:19Z

1

Here's the simple class component for above functional component:

import React from "react";

interface ColumnDef {
  tableData: {
    id: number
  }
}

interface Props {
  columnDef: ColumnDef
  onFilterChanged: (prev: number, next: number) => void
}

interface State {
  selectedVal: number
}

class CustomFilterComponent extends React.Component<Props, State> {
  state = {
    selectedVal: 0,
  }
  
  handleChange = e => {
    const val = e.target.value;
    this.setState(val);
    this.props.onFilterChanged(this.props.columnDef.tableData.id, val);
  }
  
  render() {
    return (
      <th>
        <Select value={this.state.selectedVal} onChange={this.handleChange}>
            <MenuItem value={"0"} disabled>
                Filter
            </MenuItem>

            {/* What is phpVersions? */}
            {phpVersions.map((phpVersion): ReactElement => {
              return (
                <MenuItem value={phpVersion}>{phpVersion}</MenuItem>
              )
            })}
        </Select>
      </th>
    );
  }
}

Note: I aslo commented what phpVersions comes from as well? If that is a part of props, just simply change to: this.props.phpVersions

edited Aug 10, 2020 at 6:34

answered Aug 10, 2020 at 6:19

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

felix Over a year ago

php Version is actually just an array. but it is not defined in props.

felix Over a year ago

this.props.onFilterChanged(this.props.columnDef.tableData.id, val); - this line is not working for me. I get the following error: "onFilterChanged does not exist on type...".

tmhao2005 Over a year ago

Ah I forgot you using Typescript? If so, we have to define props/state to pass to component as typings

tmhao2005 Over a year ago

I switched the answer as Typescript style

tmhao2005 Over a year ago

BTW I don't know why you put the logic of rendering phpVersions into this component as this property doesn't belong to the component. You might have to check again though.

|

Collectives™ on Stack Overflow

Implementing Class - REACT

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related