Реагировать JS добавления

Question

JSBin

Я хочу добавить в OBJ на контейнер каждый раз, когда я нажимаю кнопки, как я могу это сделать?

Это только замена контейнера.

Также я хочу сохранить эти кнопки eventListeners кнопки1, button2 в jquery.

HTML

<h1 class="h1">This is H1</h1> 
<button class="button1">This is button1</button> 
<button class="button2">This is button2</button> 
<div id="container"></div> 

JSX

var obj = [ 
     { 
      'name' : 'Denis Mcarthy', 
      'id' : 5, 
      'comment' : "fuck this shit", 
      'me' : true, 
      'pp' : 'https://avatars2.githubusercontent.com/u/598730?v=3&s=88' 
     }, 
     { 
      'name' : 'John Cena', 
      'id' : 8, 
      'comment' : "This is Dope. Bring some Coke", 
      'pp' : 'https://avatars0.githubusercontent.com/u/96150?v=3&s=88' 
     }    
    ]; 
    var obj2 = [ 
     { 
      'name' : 'Kendall Bitch', 
      'id' : 5, 
      'comment' : "What the Fuck", 
      'me' : true, 
      'pp' : 'https://avatars2.githubusercontent.com/u/598730?v=3&s=88' 
     }, 
     { 
      'name' : 'Randy Orton', 
      'id' : 8, 
      'comment' : "Suck this bitch", 
      'pp' : 'https://avatars0.githubusercontent.com/u/96150?v=3&s=88' 
     }    
    ];  
$('.button1').click(function(){ 
    renderTweet(obj); 
}); 
$('.button2').click(function(){ 
    renderTweet(obj2); 
}); 



     function renderTweet(obj){ 
     var TweetBox = React.createClass({ 
      render: function() { 
      return ( 

     <div> 
      {obj.map((row,i) =>  
       <div className="well clearfix"> 
        <img src={row.pp} /> 
        <div id={row.id}> 
         {row.name} 
         <br /> 
         {row.comment} 
        </div> 
       </div> 
      )} 
     </div> 

      ); 
      } 
     }); 


     ReactDOM.render(
      <TweetBox />, 
      document.getElementById("container") 
     );  
    } 

Answer 1

Не воздавать document.getElementById("container"), но document.getElementById("container").appendChild(document.createElement('div'))

Это добавит пустой DIV в #container и возвращает этот DIV к функции рендеринга для использовать

Answer 2

Используйте другой уаг final, который будет хранить обновленное значение, каждый раз при нажатии кнопки, поместить этот массив в этом вар и использовать final для создания пользовательского интерфейса, попробуйте следующее:

let final = []; 
$('.button1').click(function(){ 
    final = final.concat(obj); 
    renderTweet(final); 
}); 
$('.button2').click(function(){ 
    final = final.concat(obj2); 
    renderTweet(final); 
}); 

Проверьте это для рабочего примера:

jsbin: https://jsbin.com/fofasuruno/edit?html,js,output