How i can destructuring {this.props.children}?
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!
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>
)
}