Is it possible to use ReactDOM.createPortal inside <React.Fragment> with another element that is rendered to where the component is rendered or am I doing something wrong here?
class Component extends React.Component{
render(){
return (
<React.Fragment>
ReactDOM.createPortal(<h1>Hello</h1>,
document.getElementById('side'))
<h1>Hello</h1>
</React.Fragment>
);
}
}
Yes it is entirely possible, you just need to wrap React.createPortal within {} like
class Component extends React.Component{
render(){
return (
<React.Fragment>
{ReactDOM.createPortal(<h1>Hello</h1>,
document.getElementById('side'))}
<h1>Hello</h1>
</React.Fragment>
);
}
}
Working codesandbox
Related
Can someone please explain to me the answer to this: like how are we embedding and whats ReactDOM.render() doing?
Question: How can you embed two or more components into one?
Answer: We can embed components into one in the following way:
class MyComponent extends React.Component{
render(){
return(
<div>
<h1>Hello</h1>
<Header/>
</div>
);
}
}
class Header extends React.Component{
render(){
return
<h1>Header Component</h1>
};
}
ReactDOM.render(
<MyComponent/>, document.getElementById('content')
);
If you don't want to have a div or any other component that surrounds your other components then you can make use of the short syntax and that goes as follow:
class MyComponent extends React.Component{
render(){
return(
<>
<h1>Header Component</h1>
<div>
<h1>Hello</h1>
</div
</>
);
}
}
ReactDOM.render(
<MyComponent/>, document.getElementById('content')
);
currently working on react. I have two components lets say ad and home . Inside home components i have one image and on click event of that image i want to render ad inside home component below image. Is there any simples method . thank you!
check this. i think this is what you want
//dynamically generate div
let DynamicDiv=()=>{
return (<div>
<p>i am here</p>
</div>)
}
class App extends Component {
constructor(props){
super(props)
this.state={
visible:false //visibility of Component
}
this.divVisiblity=this.divVisiblity.bind(this) //function is bind when user clicks on pic
}
divVisiblity(){
//this function will get called when user clicks on function
this.setState(()=>{return {visible:!this.state.visible}}) //changes visible state of Component when user clicks
}
render() {
return (
<div>
<div className="App">
{/* onClick is assigned function named divVisiblity */}
<img onClick={this.divVisiblity} src="https://placekitten.com/g/200/300" alt="test"/>
{/*this is ternary if else statement in js */}
{/* if visible = true ,display Component else dont */}
<div>
{this.state.visible && <DynamicDiv/>}
</div>
);
}
}
I think that will help to you.
export default class HomeComponent extends Component<Props> {
constructor(props) {
super(props);
this.state = {
renderAdComponent: false
};
this.onClickHandler = this.onClickHandler.bind(this);
}
onClickHandler() {
this.setState({renderAdComponent: !this.state.renderAdComponent})
}
render() {
return (
<View>
<Image onClick={this.onClickHandler}/>
{this.state.renderAdComponent ? <AdComponent/> : null}
</View>
);
}
}
What #sdkcy suggested is okay but the ternary operator isn't really needed. You can do the following
{ this.state.isAdShown && <ComponentToShow /> }
This gets rid of the useless : null result.
I have come across many sources which talk about how to do Component nesting. However, whenever I try to create a Component inside another Component my code fails.
class parent extends React.Component{
class child extends React.Component{
render(){
return <div><h1>Hiiii</h1></div>;
}
}
render(){
return <div><DEF /></div>;
}
}
You can't do that. You can do this on the same file (not same component)
class DEF extends Component {
render() {
return (
<div>
<h1>Hiiii</h1>
</div>
);
}
}
export default class ABC extends Component {
render() {
return (
<div>
<DEF />
</div>
);
}
}
You can't define class inside another class and I don't see why you would want to.
In React you can define Components in two ways: a stateful component (class) or a functional component (function). Stateful components should only be used when you need to manage state locally.
You can do something like:
export default class MyStatefulComponent extends Component() {
render() {
return (
<div><MyFunctionalComponent {...this.props} /></div>
)
}
}
function MyFunctionalComponent(props) {
return <h1>I am functional</h1>
}
I have used the spread operator to pass on the props from the stateful to the functional component, but you should probably pass the individual props as needed..
Comoponent nesting means rendering react components inside other components. Like
<ParentComponent property={value}>
<div>
<ChildComponent />
...
</div>
</ParentComponent>
This is how you can achieve what you are trying to do.
class ABC extends React.Component {
render() {
class DEF extends React.Component {
render() {
return (
<div>
<h1>Hiiii</h1>
</div>
);
}
}
return (
<div>
<DEF />
</div>
);
}
}
Yo can just define component as a static property of other component
class Test extends Component {
static SubTest=props=><div>SubTet</div>
render(){
return(
<div>Test component</div>
)
}
<Test />
<test.SubTest />
I have a problem with the prop. Below is my code and I don't understand why when I'm rendering paragraph with {this.props.name}, it doesn't show the name from props. It may be a stupid question but I've just started my adventure with React so I need your help.
class CardGenerator extends React.Component{
render(){
return (
<div>
<Name/>
</div>
)
}
}
class Name extends React.Component{
render(){
return <p>{this.props.name}</p>
}
}
ReactDOM.render( <CardGenerator name='David'/>, document.getElementById('app'))
Because you are not passing the props to Name component. You are passing the prop name to CardGenerator component there it will be available by this.props.name. To access that inside Name component you need to pass the value to Name component again.
Use this:
class CardGenerator extends React.Component{
render(){
return (
<div>
<Name name={this.props.name}/>
</div>
)
}
}
class Name extends React.Component{
render(){
return <p>{this.props.name}</p>
}
}
ReactDOM.render( <CardGenerator name='David'/>, document.getElementById('app'))
Check the working example:
class CardGenerator extends React.Component{
render(){
return (
<div>
<Name name={this.props.name}/>
</div>
)
}
}
class Name extends React.Component{
render(){
return <p>{this.props.name}</p>
}
}
ReactDOM.render( <CardGenerator name='David'/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>
You are passing the name to the CardGenerator component, but then the CardGenerator component is not passing the name to the Name component.
So I started with React and I have these two Components.
In the first component I want to iterate an array of objects with the map() function (which works) and call the other component that for now just returns a simple h1 tag.
Well, nothing is been called and there is no error in the console.
I believe the problem is in the return sentence in the renderAvatarData()
(if I do console.log after the return sentence it seems to not get there but if the console.log is before the return it invokes)
HomePageBoxesData.js
import React, { Component } from 'react';
import AvatarDetails from './AvatarDetails';
class HomePageBoxesData extends Component{
constructor(props) {
super(props);
};
renderAvatarData(){
this.props.data.map(data => {
return <AvatarDetails data={data}/>
});
}
render(){
return(
<div>
{this.renderAvatarData()}
</div>
);
}
};
export default HomePageBoxesData;
AvatarDetails.js
import React, { Component } from 'react';
class AvatarDetails extends Component{
constructor(props) {
super(props);
};
render(){
return(
<h1>Hello World</h1>
);
}
};
export default AvatarDetails;
Issue is in renderAvatarData() method, you forgot to use return with map, Use this:
renderAvatarData(){
return this.props.data.map((data)=>{
return <AvatarDetails data={data}/>
});
}
Since you just want to return the Component, you can directly write it like this:
renderAvatarData(){
return this.props.data.map(data => <AvatarDetails data={data} /> );
}
i agree with Mayank Shukla but i usually use this method in this case:
render() {
return(
<div>
_.map(this.props.data, function(value, key){
return(
<AvatarDetails key={key} data={value} />
)
})
</div>
i am not sure if there is one better than the other