How i can destructuring {this.props.children}?

Question

I want to add a background to my mobile app but when i use "this.props.children" eslint say me "Must use destructuring props assignment". Why i can destructuring this props ?

This my code ,

export default class WallPaper extends Component {
  render() {
    return (
      <ImageBackground
        source={backgroundimg}
        imageStyle={{ opacity: 0.9 }}
        style={styles.container}
      >
        {this.props.children}
      </ImageBackground>
    );
  }
}

when i use this code

export default class WallPaper extends Component {
  render() {
    const { children } = this.props;
    return (
      <ImageBackground
        source={backgroundimg}
        imageStyle={{ opacity: 0.9 }}
        style={styles.container}
      >
        {children}
      </ImageBackground>
    );
  }
}

i have this error "'children' is missing in props validation"

when i use this code ,

export default class WallPaper extends Component {
  render() {
     (this.props) => {
    return (
      <ImageBackground
        source={backgroundimg}
        imageStyle={{ opacity: 0.9 }}
        style={styles.container}
      >
        {props.children}
      </ImageBackground>
    );
    }
  }
}

i have this error,

thank you in advance for your help !

Answer 1

The answers are missing for functional component cases. children is just a prop passed to the component. In order to use it like you are using props.url you need to add it to that list so it can be "pulled out" of the props object.

export const Welcome = ({name, hero, children}) => {
        return (
        <div>
           <h1> Class Component with {name} as {hero} </h1>
            {children}
        </div>
        )
    }