CODEWITHSUNDEEP
javascriptnode.jsreactjsreact-nativedestructuring
Michel Melhem
Michel Melhem

Reputation: 681

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

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" error

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, enter image description here

thank you in advance for your help !

Upvotes: 10

Views: 11319

Answers (5)

Rajon Kobir
Rajon Kobir

Reputation: 173

and for the class component:

export class Welcome extends Component {
    render(){
        const {name, hero, children} = this.props
        return (
            <div>
                <h1> Class Component with {name} as {hero} </h1>
                {children}
            </div>
            )
    }
}

Upvotes: 1

Rajon Kobir
Rajon Kobir

Reputation: 173

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>
        )
    }

Upvotes: 11

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38827

You could try the following to destructure children from this.props: 

export default class WallPaper extends Component {
  render() {
    const { children } = this.props;

    return (
      <ImageBackground
        source={backgroundimg}
        imageStyle={{ opacity: 0.9 }}
        style={styles.container}
      >
        {children}
      </ImageBackground>
    );
  }
}

It looks like your project may require propTypes for this component. Try the following to add a children prop type. Note, you will need to install package prop-types:

// ... 
import PropTypes from 'prop-types';

class WallPaper extends Component {      
  render() {
    const { children } = this.props;

    return (
      <ImageBackground
        source={backgroundimg}
        imageStyle={{ opacity: 0.9 }}
        style={styles.container}
      >
        {children}
      </ImageBackground>
    );
  }
}

WallPaper.propTypes = {
  children: PropTypes.node // or PropTypes.node.isRequired to make it required
};

export default WallPaper;

Hopefully that helps!

Upvotes: 6

Rafael Lucini
Rafael Lucini

Reputation: 599

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

Upvotes: 3

Code Maniac
Code Maniac

Reputation: 37755

This is due to linting rule.

You can turn off rule if you don't want destructing.

If you want than you can do it like this.

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

Upvotes: 2

Related Questions