How to add elements to select using react.js?

Question

Web development

How to add elements to select using react.js?

var  SelectPeople = React.createClass({  // реактовский объект
    
    render : function(){
        $(document).ready(function() {
            $('#example-dropRight').multiselect({
                buttonWidth: '400px',
                dropRight: true
            });
        });

       var x
       $.ajax({   // получаю от сервера jason который надо вставить в select
            url: "/list",
            type: "POST",
            contentType: "application/json",
            processData: false,
            success: function(a){
                   console.log(a)
                }
            },
            error: this.onAjaxError
        })
                   return (

      <select id="example-dropRight" multiple="multiple">
                       </select>
    )
  }

How to add and generally manipulate data? How to set value and option? And how to count?
Thanks in advance!!!

Answer 1

You already have 2 identical questions on the Toaster. Is it really clear from the official documentation?
I don’t insist on doing just that, I wrote on my knees, but this should work:

var SelectPeople = React.createClass({ 

  getInitialState: function(){
    return {items: []};
  }
  componentDidMount: function(){
    $.ajax({ 
      url: "/list",
      type: "POST",
      contentType: "application/json",
      processData: false,
      success: function(a){
       		this.setState({items: a}); // a === {'one': 'two'}
       	}
       },
   },
   render: function(){
   		var items = Object.keys(this.state.items).map(function(val, index) {
   			return <option key={index} value={val}>this.state.items[val]</option>;
   		}.bind(this));
   		return (
   			<select id="example-dropRight" multiple="multiple">
   				{items}
   			</select>
   		)
   }
});

Can we count the number? ;)
PS Tab does not recognize JSX, please ignore

Answer 2

Just like everywhere else.
Post the code. What have already been done. You will be corrected. Nobody will write the code for you.
There are no ready-made Google solutions for everything. Sometimes you need to think and understand how the tool works.

Answer 3

I'm new to React, but even then I can see that this shouldn't work.
Read more about the lifecycle of a component here. As far as I understand you need:
Well, in the render function, analyze for the presence of one of the cases
PS: I hope I didn't lie too much :)