Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

How to use spread operator in React native typescript class component

$
0
0

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?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>