How to render elements inside a particular div in reactjs? -


i have list of dropdowns rendered.

<ul>   <li id="list_1">     <select>       <option>---</option>       <option>1</option>       <option>2</option>       <option>3</option>     </select>   </li>   <li id="list_2">     <select>       <option>---</option>       <option>4</option>       <option>5</option>       <option>6</option>     </select>   </li> </ul>

on selecting option dropdown.i render span element onclick method binded , div element shown below.

<ul>   <li id="list_1">     <select>      <option>---</option>       <option>1</option>       <option>2</option>       <option>3</option>     </select>     <span onclick={this.getdropdown}> (+) </span>     <div></div>   </li>   <li id="list_2">     <select>       <option>---</option>       <option>4</option>       <option>5</option>       <option>6</option>     </select>     <span onclick={this.getdropdown}> (+) </span>     <div></div>   </li> </ul>

result 1: if option value 1 selected first dropdown , (+) clicked li element id="list_1".i must result shown below.

<ul>   <li id="list_1">     <select>      <option>---</option>       <option>1</option>       <option>2</option>       <option>3</option>     </select>     <span onclick={this.getdropdown}> (+) </span>     <div>          <select>             <option>---</option>             <option>a</option>             <option>b</option>          </select>     </div>   </li>   <li id="list_2">     <select>       <option>---</option>       <option>4</option>       <option>5</option>       <option>6</option>     </select>     <span onclick={this.getdropdown}> (+) </span>     <div></div>   </li> </ul>

result 2: if option value 5 selected second dropdown , (+) clicked li element id="list_2".i must result shown below.

<ul>   <li id="list_1">     <select>      <option>---</option>       <option>1</option>       <option>2</option>       <option>3</option>     </select>     <span onclick={this.getdropdown}> (+) </span>     <div></div>   </li>   <li id="list_2">     <select>       <option>---</option>       <option>4</option>       <option>5</option>       <option>6</option>     </select>     <span onclick={this.getdropdown}> (+) </span>     <div>        <select>           <option>---</option>           <option>x</option>           <option>y</option>           <option>z</option>        </select>     </div>   </li> </ul>

note: li id values added reference.li elements have no id's.

the problem when rendering components have explicitly mention elements have rendered.like reactdom.render("<app/>",document.getelementbyid("container")) .here <div> in dropdown rendered doesn't have id.so if add id <div id="container"></div>.the dropdown overwritten.

you can value dropdown, , return different views based on like:

render: function(){   this.state.dropdown? return(//render no dropdown) : return(//render dropdown.) }

Comments

Post a Comment

Popular posts from this blog

sublimetext3 - what keyboard shortcut is to comment/uncomment for this script tag in sublime -

Image
i have script tag in code, keyboard shortcut comment/uncomment script tag in sublime. after selecting script open , close tag. <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> i pressing ctrl + shift + / , getting this /*<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script>*/ also pressed ctrl + / , got this // <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> // </script> instead of <!-- <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"> </script> --> script open , close tag in 2 lines not in 1 line , not have spaces too. for mac,high light lines want comment. hold 'command , / ' commented. for windows: high line or select lines ,then hold ctrl + / if not work: ...
Read more

post - imageshack API cURL -

i credentials correct. when send image through form this:(action="http://api.imageshack.com/v2/images/"). working fine when tried send $ch = curl_init($url); failed. code: enter code here <form action="" method="post" enctype="multipart/form-data"> select image upload: <input type="file" name="file" id="file" multiple> <input type="text" name="auth_token" id="auth_token" value="xxxxxxxxxxxxxxxx"> <input type="text" name="api_key" id="api_key" value="xxxxxxxxxxxxxxx"> <input type="submit" value="upload image" > </form> $url = ' http://api.imageshack.com/v2/images/ '; $temp = $_files["file"]['tmp_name']; echo $temp."<br>" ; $ch = curl_init($url); curl_setopt($ch, curlopt_post, true); curl...
Read more

dataset - MPAndroidchart returning no chart Data available -

i having problems mpandroidchart. adding temperature , humidity data chart, displays "no chart data available". here can see bug is? super grateful! //create data //set size of data int size = list.size(); if (size > 24){ size = 24;} //create lists form temp , hum arraylist<entry> temps = new arraylist<entry>(); arraylist<entry> hums = new arraylist<entry>(); //fill list temp values (int = 0; < size; i++){ entry value = new entry(math.round(list.get(list.size()-size + i).temp), (size-i)); temps.add(value); } //fill list hum values (int = 0; < size; i++){ entry value = new entry(math.round(list.get(list.size()-size + i).hum), (size-i)); hums.add(value); } ...
Read more