Adding “manually” multiple React components in the same container

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I'm migrating an old "jQuery" application, adding some React components. I have some JS/jQuery code adding some elements in the DOM. I want to replace this using for example a new Item component, creating many instances and adding them to the same container. And I need to get the real DOM element to manipulate it (with the old JS/jQuery code).

I found this solution :

const elt1 = ReactDOM.findDOMNode(ReactDOM.render(<CalendarItem item={item} />, container))

but the container content is replaced with the new Item and adding many items, only the last is finally in the container.

I have tried portal :

const elt2 = ReactDOM.createPortal(<CalendarItem item={item} />, container)

but the returned element elt2 is not a DOM element (that I can manipulate after).

Is there a solution to do this ?

Thanks

asked Jan 3 at 17:01

xnopre

160110

My approach would be to get rid of jQuery entirely.

– Chris G
Jan 3 at 17:03

add a comment |

I found this solution :

const elt1 = ReactDOM.findDOMNode(ReactDOM.render(<CalendarItem item={item} />, container))

but the container content is replaced with the new Item and adding many items, only the last is finally in the container.

I have tried portal :

const elt2 = ReactDOM.createPortal(<CalendarItem item={item} />, container)

but the returned element elt2 is not a DOM element (that I can manipulate after).

Is there a solution to do this ?

Thanks

asked Jan 3 at 17:01

xnopre

160110

My approach would be to get rid of jQuery entirely.

– Chris G
Jan 3 at 17:03

add a comment |

I found this solution :

const elt1 = ReactDOM.findDOMNode(ReactDOM.render(<CalendarItem item={item} />, container))

but the container content is replaced with the new Item and adding many items, only the last is finally in the container.

I have tried portal :

const elt2 = ReactDOM.createPortal(<CalendarItem item={item} />, container)

but the returned element elt2 is not a DOM element (that I can manipulate after).

Is there a solution to do this ?

Thanks

asked Jan 3 at 17:01

xnopre

160110

I found this solution :

const elt1 = ReactDOM.findDOMNode(ReactDOM.render(<CalendarItem item={item} />, container))

but the container content is replaced with the new Item and adding many items, only the last is finally in the container.

I have tried portal :

const elt2 = ReactDOM.createPortal(<CalendarItem item={item} />, container)

but the returned element elt2 is not a DOM element (that I can manipulate after).

Is there a solution to do this ?

Thanks

javascript jquery reactjs

asked Jan 3 at 17:01

xnopre

160110

asked Jan 3 at 17:01

xnopre

160110

asked Jan 3 at 17:01

xnopre

160110

asked Jan 3 at 17:01

xnopre

160110

asked Jan 3 at 17:01

xnopre

160110

My approach would be to get rid of jQuery entirely.

– Chris G
Jan 3 at 17:03

add a comment |

My approach would be to get rid of jQuery entirely.

– Chris G
Jan 3 at 17:03

My approach would be to get rid of jQuery entirely.

– Chris G
Jan 3 at 17:03

add a comment |

1 Answer
1

active

oldest

votes

If you want to manipulate React components using their related DOM elements, look into Refs (https://reactjs.org/docs/refs-and-the-dom.html).

So create the ref in the constructor:

constructor(props) {

  super(props);

  ...

  this.calendarItem = React.createRef();

}

And then give the ref to your new CalendarItem:

<CalendarItem item={item} ref={this.calendarItem} />

You can then access the actual DOM node of that CalendarItem using this.calendarItem.current, for example:

$(this.calendarItem.current).focus();

answered Jan 3 at 17:06

dan

846620

Thanks. But I don't need to access to the DOM element from the component itself, but I need to "manually" create manu component in the same container, and get the DOM element for each component, outside this components, when I create this components.

– xnopre
Jan 4 at 8:26

Sorry, I really don't understand that explanation

– dan
Jan 4 at 11:52

If I'm right, your solution able a component to know its DOM element. It's not my need. I need to know the DOM element for a component "manually" added to a container (outside of this component)

– xnopre
Jan 8 at 10:06

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54026657%2fadding-manually-multiple-react-components-in-the-same-container%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

If you want to manipulate React components using their related DOM elements, look into Refs (https://reactjs.org/docs/refs-and-the-dom.html).

So create the ref in the constructor:

constructor(props) {

  super(props);

  ...

  this.calendarItem = React.createRef();

}

And then give the ref to your new CalendarItem:

<CalendarItem item={item} ref={this.calendarItem} />

You can then access the actual DOM node of that CalendarItem using this.calendarItem.current, for example:

$(this.calendarItem.current).focus();

answered Jan 3 at 17:06

dan

846620

Thanks. But I don't need to access to the DOM element from the component itself, but I need to "manually" create manu component in the same container, and get the DOM element for each component, outside this components, when I create this components.

– xnopre
Jan 4 at 8:26

Sorry, I really don't understand that explanation

– dan
Jan 4 at 11:52

If I'm right, your solution able a component to know its DOM element. It's not my need. I need to know the DOM element for a component "manually" added to a container (outside of this component)

– xnopre
Jan 8 at 10:06

add a comment |

If you want to manipulate React components using their related DOM elements, look into Refs (https://reactjs.org/docs/refs-and-the-dom.html).

So create the ref in the constructor:

constructor(props) {

  super(props);

  ...

  this.calendarItem = React.createRef();

}

And then give the ref to your new CalendarItem:

<CalendarItem item={item} ref={this.calendarItem} />

You can then access the actual DOM node of that CalendarItem using this.calendarItem.current, for example:

$(this.calendarItem.current).focus();

answered Jan 3 at 17:06

dan

846620

Thanks. But I don't need to access to the DOM element from the component itself, but I need to "manually" create manu component in the same container, and get the DOM element for each component, outside this components, when I create this components.

– xnopre
Jan 4 at 8:26

Sorry, I really don't understand that explanation

– dan
Jan 4 at 11:52

If I'm right, your solution able a component to know its DOM element. It's not my need. I need to know the DOM element for a component "manually" added to a container (outside of this component)

– xnopre
Jan 8 at 10:06

add a comment |

If you want to manipulate React components using their related DOM elements, look into Refs (https://reactjs.org/docs/refs-and-the-dom.html).

So create the ref in the constructor:

constructor(props) {

  super(props);

  ...

  this.calendarItem = React.createRef();

}

And then give the ref to your new CalendarItem:

<CalendarItem item={item} ref={this.calendarItem} />

You can then access the actual DOM node of that CalendarItem using this.calendarItem.current, for example:

$(this.calendarItem.current).focus();

answered Jan 3 at 17:06

dan

846620

If you want to manipulate React components using their related DOM elements, look into Refs (https://reactjs.org/docs/refs-and-the-dom.html).

So create the ref in the constructor:

constructor(props) {

  super(props);

  ...

  this.calendarItem = React.createRef();

}

And then give the ref to your new CalendarItem:

<CalendarItem item={item} ref={this.calendarItem} />

You can then access the actual DOM node of that CalendarItem using this.calendarItem.current, for example:

$(this.calendarItem.current).focus();

answered Jan 3 at 17:06

dan

846620

answered Jan 3 at 17:06

dan

846620

answered Jan 3 at 17:06

dan

846620

answered Jan 3 at 17:06

dan

846620

Thanks. But I don't need to access to the DOM element from the component itself, but I need to "manually" create manu component in the same container, and get the DOM element for each component, outside this components, when I create this components.

– xnopre
Jan 4 at 8:26

Sorry, I really don't understand that explanation

– dan
Jan 4 at 11:52

If I'm right, your solution able a component to know its DOM element. It's not my need. I need to know the DOM element for a component "manually" added to a container (outside of this component)

– xnopre
Jan 8 at 10:06

add a comment |

Thanks. But I don't need to access to the DOM element from the component itself, but I need to "manually" create manu component in the same container, and get the DOM element for each component, outside this components, when I create this components.

– xnopre
Jan 4 at 8:26

Sorry, I really don't understand that explanation

– dan
Jan 4 at 11:52

If I'm right, your solution able a component to know its DOM element. It's not my need. I need to know the DOM element for a component "manually" added to a container (outside of this component)

– xnopre
Jan 8 at 10:06

Thanks. But I don't need to access to the DOM element from the component itself, but I need to "manually" create manu component in the same container, and get the DOM element for each component, outside this components, when I create this components.

– xnopre
Jan 4 at 8:26

Sorry, I really don't understand that explanation

– dan
Jan 4 at 11:52

If I'm right, your solution able a component to know its DOM element. It's not my need. I need to know the DOM element for a component "manually" added to a container (outside of this component)

– xnopre
Jan 8 at 10:06

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu