Shadid12

return (
   <div>
     {cards.map(card => (
       <Factory component={card} />
     ))}
   </div>
 );

Shadid12

function Factory(props) {
  switch (props.component.type) {
    case "A":
      return <A />;
    case "B":
      return <B />;
    case "C":
      return <C />;
    default:
      return <div>Reload...</div>;

Shadid12

function App() {
  return (
      <div>
        {cards.map(card => {
          switch (card.type) {
            case "A":
              return <A />;
            case 'B':
              return <B />;
            case 'C':

Shadid12

function A() {
 return(
   <div>Type A Component</div>
 )
}

function B() {
 return(
   <div>Type B Component</div>
 )

Shadid12

user_a = {
   name: "jhon doe",
   items: [
     {
       title: "Card 1",
       details: {
         // ...more info
       },
       type: "A"
     },

Shadid12

SOLID principles in React

Part 1. Developing Scalable, Reliable, Clean React Components with Single Responsibility Principle

This article is a part of an ongoing series where we deep dive into SOLID principles and how we can leverage it to better architect our large-scale front-end applications. We discuss how SOLID principles fit in to the Functional Programming Paradigm of JavaScript.

If you are coming from an object oriented programming world (especially Java or C#) you have already heard and used SOLID principles. SOLID is an acronym for 5 important design principles when doing OOP (Object Oriented Programming).

SOLID stands for S – Single Responsibility Principle (SRP in short)

Shadid12

---

---

SOLID principles in React

Part 1. Developing Scalable, Reliable, Clean React Components with Single Responsibility Principle

This article is a part of an ongoing series where we deep dive into SOLID principles and how we can leverage it to better architect our large-scale front-end applications. We discuss how SOLID principles fit in to the Functional Programming Paradigm of JavaScript.

If you are coming from an object oriented programming world (especially Java or C#) you have already heard and used SOLID principles. SOLID is an acronym for 5 important design principles when doing OOP (Object Oriented Programming).

SOLID stands for

Shadid12

//public/index.js
...

pc.onaddstream = function (obj) {
    var vid = document.createElement('video');
    vid.setAttribute('class', 'video-small');
    vid.setAttribute('autoplay', 'autoplay');
    vid.setAttribute('id', 'video-small');
    document.getElementById('users-container').appendChild(vid);
    vid.srcObject = obj.stream;

Shadid12

//public/index.js
...

var answersFrom = {}, offer;

socket.on('answer-made', function (data) {
    pc.setRemoteDescription(new sessionDescription(data.answer), function () {
        document.getElementById(data.socket).setAttribute('class', 'active');
        if (!answersFrom[data.socket]) {
            createOffer(data.socket);

Shadid12

// chat-server.ts

socket.on('make-answer', function (data) {
  socket.to(data.to).emit('answer-made', {
    socket: socket.id,
    answer: data.answer
  });
});