-2

I am trying to mimic what is mostly used in vanilla JS which is document.createElement(...)
I have been trying to work with WebRTC and kurento which has brought me to this never ending loop of confusion. I am trying to follow their documentation which is in pure JavaScript for a many-to-many use case, but I have to implement it in react.

https://github.com/Kurento/kurento-tutorial-java/tree/master/kurento-group-call

https://doc-kurento.readthedocs.io/en/stable/tutorials/java/tutorial-groupcall.html

Any help will be great. There is not much about this topic on the internet

I have tried to even copy and paste the code and connect it as a last resort, but that has made things worse.

EDIT --

I am sorry for not providing enough details earlier , what I meant to say was in Participant.js (which is the front end and completely written in Javascript) there is a function which is as follows-

function Participant(name) {
this.name = name;
var container = document.createElement('div');
container.className = isPresentMainParticipant() ? 
PARTICIPANT_CLASS : PARTICIPANT_MAIN_CLASS;
container.id = name;
var span = document.createElement('span');
var video = document.createElement('video');
var rtcPeer;

container.appendChild(video);
container.appendChild(span);
container.onclick = switchContainerClass;
document.getElementById('participants').appendChild(container);

span.appendChild(document.createTextNode(name));

and it goes on like that I will link the file to the exact path to the front end which has the js files and the index.html

https://github.com/Kurento/kurento-tutorial-java/tree/master/kurento-group-call/src/main/resources/static

So in this particular function they use - var container = document.createElement('div');

which creates a div inside a div in the html file -

<div id="room" style="display: none;">
            <h2 id="room-header"></h2>
             <div id="participants">
               (Creates a div here and video is rendered here)
             </div>
            <input type="button" id="button-leave" 
                onmouseup="leaveRoom();"
                value="Leave room">
        </div>

The Particpant function is called in conferenceroom.js --

var participant = new Participant(name);

line 105 on github under 'existingParticipants' function.

TL;DR

In short I just want to know what is the better way to approach manipulating a dom element and adding new divs with different classnames or tagnames etc on the click of a button in React.

I cannot find anyone who has done a project on a group call in React Js using Kurento

P.S - I am very new to stackoverflow , and I am learning to ask questions too, sorry for the headache :(

Gremlin-Sarkar
  • 1
  • 1
  • 1
    Can you explain more your use case? I can think of a couple of ways to create divs inside divs using react but not sure why you need to do that, maybe there is a better approach. – Link Strifer Mar 29 '22 at 03:28
  • The documentation you linked is Java, not JS, could you guide us here? it's a bit confusing – savageGoat Mar 29 '22 at 03:42
  • Some post to guide you in the children generation: https://stackoverflow.com/questions/36651583/dynamically-add-child-components-in-react – savageGoat Mar 29 '22 at 03:44
  • Please provide enough code so others can better understand or reproduce the problem. – Community Mar 29 '22 at 05:21
  • @LinkStrifer Basically I want to render a div which has a Live video component in it , so on the click of a button a div is created and the video is rendered. – Gremlin-Sarkar Mar 30 '22 at 03:54
  • @savageGoat The doc linked has the backend in Java yes , the whole of frontend is written in Javascript , I mean the Client Side logic. https://doc-kurento.readthedocs.io/en/stable/tutorials/java/tutorial-groupcall.html#client-side-logic – Gremlin-Sarkar Mar 30 '22 at 03:55

1 Answers1

0

If you want to create the same parent component inside the child, you can use recursive call.

function InnerDiv ({count=5}) {
  return (
    <div>
      <h5>This is a component</h5>
    {count>0?<InnerDiv count={count-1} />: null }
    </div>)
}

Then when you add this component in another component (Like App), just pass the count vairiable.

export default function App() {
  return (
    <div className="App">
      <InnerDiv count={4} />
    </div>
  );
}
Pranavan
  • 1,287
  • 1
  • 6
  • 18
  • I want to render a div which has a video component , on the click of a button. Trying to build a group call app using WebRtc , Kurento and React. Backend is not my strength and I am not working on it as of now. So this is the basic usecase- – Gremlin-Sarkar Mar 30 '22 at 04:00