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?