How to use spread operator in React native typescript class component-CodePudding

I am working on my FormButton.tsx file. I am using React native and TypeScript:

interface Props {
  buttonTitle: string;
  restProps: any;
}

interface State {}

export default class FormButton extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
  }

  render() {
    const {buttonTitle, ...restProps} = this.props;
    return (
      <TouchableOpacity>
        <Text>{buttonTitle}</Text>
      </TouchableOpacity>
    );
  }
}

As you notice, for the restProps I am trying to receive the rest of the props given by this props. However, this is returning an error 'restProps' is declared but its value is never read.ts(6133).

Basically, what I want to accomplish is to be able to destructure the restProps inside const {buttonTitle, ...restProps} = this.props; and then be able to use that on my TouchableOpacity.

Any idea how to fix this?

UPDATE: I think there is some confusion here. I am not talking about just simply receiving one specific props. What if I have 3 or more props that aren't specify? How do I spread them in a class component via TypeScript. Usually you will see something like this in a normal functional component:

const FormButton = ({buttonTitle, ...rest}) => {
  return (
    <TouchableOpacity style={styles.buttonContainer} {...rest}>
      <Text style={styles.buttonText}>{buttonTitle}</Text>
    </TouchableOpacity>
  );
};

How do I translate this in TypeScript and React Native Class Component?

CodePudding user response：

De-structuring an object like this,

const {buttonTitle, restProps} = this.props;

Now you'll have two varaibles buttonTitle and restProps.