component props destructuring error

Bomber

I am trying to use the flowing code in my component, I keep getting the error:

Unexpected token (9:8), which if the return statement.

Can anyone help?

export class Flexible extends React.Component {

  const { style, children, ...rest } = this.props;
  return <View {...rest} style={styles.flexible}>{children}</View>;
}
Kris Selbekk

You're creating a class, which only accepts properties and functions.

It looks like you are trying to create the render method - let's do that then:

export class Flexible extends React.Component {
  render() {
    const { style, children, ...rest } = this.props;
    return <View {...rest} style={styles.flexible}>{children}</View>;
  }
}

If you don't need state or any of the life cycle functions (componentWillMount etc), you can get away with just creating a functional component:

export const Flexible = (props) => {
  const { style, children, ...rest } = props;
  return <View {...rest} style={styles.flexible}>{children}</View>;
};

It's understandable to get the two mixed up - they do look kind of similar to the untrained eye :)

Hope this fixed your issue!

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Destructuring this.props into Component

Destructuring ImmutableJS Map for React Component Props

Spreading props on a component and destructuring inside a components with typescript

React props destructuring when passing to component

destructuring props in component getting different result

React destructuring state to pass into component props

Destructuring props passed to functional component in kotlin

Must use destructuring props assignment error in constructor

How to fix "Destructuring component props breaks Solid's reactivity" warning?

Passing props to a component - syntax error

Create React Native component which renders title of component by destructuring 'props' argument

Destructuring props in ReactJS

Destructuring props dynamically?

destructuring props with the rest properties

Destructuring state/props in React

Initialize Destructuring props if null

React - TypeScript destructuring of props

Passing set statehook function into subroute component. Destructuring error

Type error when passing props to component

props showing error to read in child component

Accessing Props Error in Stateful Child Component

React + Typescript object props to component error

TypeScript error in passing props to child component in react

React Type error on sending props data to component

React functional component destructuring

ReactJS props.onchange destructuring

Different ways of destructuring props in react

React: Props destructuring and memory usage

Must use destructuring props assignment